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 还有很多配置，允许跨域等等，本人也是近期接触这个，代码虽然不多但挺实用的。