【VUE】VUE 分环境打包(开发/测试/生产)配置

做个打包笔记，工作比较忙粗糙些，文案相似，方式不同

最近要把Vue项目部署到服务器上，在测试好的项目中执行npm run build就开始打包了。但是每次只能打包到一个环境，不同环境需要配置不同的地址，还得手动更改接口的地址，这给部署带来了极大的不方便。

下面，我们要自己配置命令来实现分环境打包，项目结构如下：

1.在config目录内新建test.env.js文件(要保证和prod.env.js一致)：

'use strict'
module.exports = {
  NODE_ENV: '"test"',
  api: '/api'
}

2.修改config内的prod.env.js文件：

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  api: '/api'
}

3.在build目录下修改webpack.prod.conf.js：

// const env = require('../config/prod.env') // 注释这一行
if (process.env.NODE_ENV === 'test'){
  var env = require('../config/test.env')
}else{
  var env = require('../config/prod.env')
}

4.在build目录下修改build.js：

// process.env.NODE_ENV = 'production' // 注释这一行

5.确认安装cross-env

npm install cross-env --save-dev

6.修改package.json文件（在script里面添加）：

7.修改config内的index.js文件，对环境进行判断并切换。以及代理设置。内容如下：

8.配置成功，运行命令如下：

测试环境打包，运行：npm run build:test
生产环境打包，运行：npm run build:prod

9.axios请求：

安装axios：

npm install axios

在main.js引入：

import axios from 'axios'

Vue.prototype.axios = axios

new Vue({
  el: '#app',
  axios,
  router,
  components: { App },
  template: '<App/>'
})

在页面axios请求：

var header =  {
	Source: 'EXCHANGE'
},
var params = {
	id: 123456
}
this.axios.get('/api/exchange/api/open/paymentCode',params,{
	headers:header
} ).then(function (response) {
  	console.log(response);
}) .catch(function (error) {
  	console.log(error);
});

this.axios.post('/api/exchange/api/open/paymentCode',params,{
	headers:header
} ).then(function (response) {
    console.log(response);
}) .catch(function (error) {
  	console.log(error);
});