1.Vue.js分环境打包

vue.js分环境打包（vue-cli2.0），主要应对开发环境和生产环境请求后端地址ip不同，避免每次打包需要反复修改baseUrl的问题,根据npm run dev / npm build 打包生成不同baseUrl 配置。

打开config目录
分别修改以下两个文件如下：
dev.env.js 开发环境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',VN_CONFIG: '"dev"',API_ROOT: '"//192.168.2.2：8080"'
})

prod.env.js 生产环境

'use strict'
module.exports = {NODE_ENV: '"production"',//添加API_ROOT: '"//12.35.35：80"'
}

[注：此处ip不可用][1].
在开发的过程中在使用axios的文件下使用

axios.defaults.baseURL = process.env.API_ROOT;

这样在调用接口时就可以直接写成这样，不用重复的在前面拼上baseURL了

getInfoDetailFn(eventId){return fetch(`/api/v1/events/${eventId}/detail`)
},

[注：在开发过程中都会将axios进行封装，接口请求统一管理，这样就不需要反复的引用][4]

2.nginx 代理请求后端接口

在实际的应用场景中，在生产环境下，前端大多使用nginx作为静态资源服务器.
现在有这样一个需求，前端代码打包成功好以后，直接扔到nginx上项目任然可以正常运行，无需配置baseURL，让nginx代理发送请求。

同样打开config目录下prod.env.js

'use strict'
module.exports = {NODE_ENV: '"production"',//添加API_ROOT: '""'
}

我们将API_ROOT对应的ip删除，这样我们打包成功之后的代码放到nginx上。
比如：nginx地址为[localhost:3000][4]，因为我们将生产环境下baseURL删除并未配置，这时当我们请求接口时将为这样

这样我们就可以通过简单配置下nginx 拦截这样的请求，为我们做一次代理，请求正真的后端地址。

安装nginx点击这里下载安装
进入nginx安装目录下 => conf 打开 nginx.conf文件（nginx配置文件）

新增配置

server {listen		9090;                        # nginx监听端口root        D:/source/dist;           # vue.js前端代码打包存放目录location = /login.htm {             # 后端接口不以api开头需单独配置拦截代理proxy_pass   http://192.168.1.5:8080/login.htm;}location ^~ /api/ {                  #以api开头的接口统一拦截代理         proxy_pass   http://192.168.1.5:8080; }}

[注：#号后为注释]
这样我们就完成了利用nginx代理发送请求了。

3.但是我们仔细测试发现还有个问题，就是我们刷新页面后发现会出现404找不到资源

造成这样的原因是，Vue项目是一个单页应用，vue-router 是根据网址的不同动态的用js渲染页面，比如我们在项目中这样一个目录下刷新 [localhost:3000/test] 其实在我们正真的资源目录下并不存在这样一个目录，这也就是导致刷新后404的原因

因此需要rewrite到index.html中，然后交给路由在处理请求资源
具体配置如下（在上面的配置中添加）

server {listen		9090;root        D:/source/dist;location / {try_files $uri $uri/ @router;index index.html;}location @router {rewrite ^.*$ /index.html last;}location /images/ {proxy_pass   http://10.5.0.143/images/;}location = /login.htm {proxy_pass   http://10.5.6.54:8080/login.htm;}location ^~ /api/ {proxy_pass   http://10.5.6.54:8080; }}

这样我们就解决了刷新404的问题，nginx 还有很多配置，允许跨域等等，本人也是近期接触这个，代码虽然不多但挺实用的。