Vue.js前端部署

一、Vue打包js,css等路径问题
修改红框 框出来的地方，原本是assetsPublicPath:’ / ‘，现在改成assetsPublicPath:’ ./ ’

如果有这段 自动忽略

二、Vue打包背景图片路径问题
修改这个地方，背景图片才会出来

三、多环境部署配置
1.首先查看build.js文件夹下有没有这句话，如果有删掉。

2.这是一个运行跨平台设置和使用环境变量的脚本，当我们使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。

cross-env能够提供一个设置环境变量的scripts，让我能够以unix方式设置环境变量，然后在windows上也能兼容运行。
安装：cnpm install -S cross-env
安装成功后，在package.json的dependencies下看到相应内容

3.在package.json的 scripts下配置 build-prod（打包生产环境）和 build-test（打包测试环境）

4.config文件夹下分别配置 dev.env.js （本地环境） 、 prod.env.js （生产环境） 、test.env.js （测试环境）


5.webpack.prod.conf.js配置如下，由于我搭建vue框架的时候禁用了testing ，所以改成自己的配置字段是test。

6.webpack.base.conf.js配置如下

四、引入接口地址
1.在utils文件夹下建一个global.js，作为全局变量，引入接口地址。

2.在main.js将api挂载到vue原型上

3.在api文件夹下就可以使用我们定义的全局变量 ，这样网页才能前后端交互。

五、打包到服务器
配置完这些就可以了，我们运行npm run build-prod （生产环境打包），npm run build-test （测试环境打包）。在cmd输入npm run build-test 按回车，之后会出现如图画面，看到这个就证明打包成功。（npm run build-prod同理）