Vuejs测试环境、生产环境部署

Vuejs介绍

官网一句话介绍了此框架： 渐进式JavaScript 框

生产环境部署

公司最近一个项目使用了Vuejs框架，作为公司运维肯定会有部署，之前一直使用nodejs框架，可以通过 node、forever、pm2来进行管理，而前端开发的同事将项目源代码给我时懵圈了，完全不认识的一个东西，赶紧和开发小哥确认，这是什么东西、这个怎么运行、这个怎么部署到生产环境？

下面是开发小哥的指导

cd project_dir
npm install 
npm run dev

我：哇，三条命令解决战斗，不对，这个我怎么在测试环境和生产环境部署，这种方式肯定不对。
开发小哥也被我问懵了。。。。
开发小哥：不知道啊。。我开发的时候就是这样启动的。。。
各种。。懵。。。。。上网查了下vuejs是什么鬼，然后一顿百度搜索“vuejs 生产环境部署”，在知乎发现大神的回复，以下是神回复的正确操作：

npm run dev 是用来在本地开发的时候做调试用的，vue开发的是前端的东西，不是nodejs 服务端程序，按道理讲，生产环境里就不该存在npm，甚至nodejs也不需要（用nodejs来做web静态服务的除外），楼主通过ssh进入到服务器里，再运行npm run dev 来启动哪是开发机上做的事情。
正确的做法很简单，通过npm run build 把生成的dist文件夹（不要上传文件夹）里的内容上传到http服务器上就可以通过 http来访问了，开发机上正常，上传以后 程序出现错误不能运行的原因99.99%的可能性是你引用资源的路径有问题。
点这儿查看大神回复，来源：知乎

看到这儿赶紧用下面的命令构建下，发现真的生成dist目录了。

npm install 
npm run build

把生成的dist目录，复制到nginx中去，首页无法显示，通过浏览器调试窗口看了下，static资源不能访问，看了下浏览器开发人员工具窗口中的url是localhost/static/js/xxxxxx.js，这个明显不正确，我是直接将dist复制到nginx网站目录html中在浏览器中使用localhost/dist可以访问index.html那就是说开发小哥们在开发中直接将static写死到网站根目录了，刚好回复这篇知乎的大神，写了这个问题。自己动手将开发小哥的build配置修改了。

一般如果vue框架的程序上传到网站服务器的根目录下是不 会有问题的，也不存在资源文件引用错误的情况，但如果你不是根目录，就会有问题，通过vue-cli 生成的开发目录，build以后默认引用资源文件的路径是
比如 app.js的引用方式

所以，如果你的目录结构是 如下

www/
    +hot/
       +static/
       +index.html

当你通过http://www.xxx.com/hot/index.html**来访问的时候 会出现找不到app.js，因为index.html里引用的app.js路径是http://www.xxx.com/static/js/app.js
但是app.js的实际路径是
http://www.xxx.com/hot/static/js/app.js 所以出现了404

要解决的方法很简单把引用方式 改成如下两种方式 都可以

或者

推荐这样的方式，可以保正在vue-router生成的url下也不出现问题

都可以，当然这也不需要手动去改，
在webpack的配置文件(config/index.js)中修改
assetsPublicPath: './'
或者
assetsPublicPath: '/hot/'
这样，我们就基本解决了有服务器子目下运行的问题，