Vue配置多环境

需求

我们在使用vue的过程中，最终部署到web容器中时候，可能会需要部署到多个环境，比如有开发环境、测试环境、生产环境等，他们的接口访问地址可能会不一样，比如测试环境可能是http://test*，生产是http://*product/，那么在vue中发送请求已经写好了访问地址，是不是要根据不同环境而在文件中修改代码呢？这样是及其不好的，本文就是为了解决这个问题，通过执行不同的命令来打包，而不是通过修改代码。

解决方案

• 在bulid文件夹中增加bulid-环境.js
• 
  build.test.js

// 配置环境变量 type 为 test ,注意test要用双引号包裹起来。配置其他环境的同理，修改type为对应的关键字
 
process.env.type = '"test"'
 
// 引入build.js文件，执行原先的编译代码
 
require('./build')

在package.json文件中增加test打包命令

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "test": "node build/build-test.js",
    "devtest": "node build/build-devtest.js",
    "prod": "node build/build-prod.js"
  },

修改prod.env.js文件,增加接口地址配置，如果之后有其他会根据环境变化的配置也在该文件加入

'use strict'

const target = process.env.npm_lifecycle_event;
if (target == 'test') {
//如果有其他配置也加入在obj中
//24测试环境
var obj = {
  NODE_ENV: '"production"',
  BASE_API: '"http://**test**"',
  // 可以添加其他环境变量
}
} else if (target == 'prod') {
// 线上环境
var obj = {
  NODE_ENV: '"production"',
  BASE_API: '"https://**product**"',
}
} else if (target == 'devtest') {
//23开发测试环境
var obj = {
  NODE_ENV: '"production"',
  BASE_API: '"http://**dev**"',
}
} else {
//本地
var obj = {
  NODE_ENV: '"production"',
  BASE_API: '"http://localhost:81"',
}
}
module.exports = obj

在main.js文件中注册api（接口地址）为全局
此处可以根据自己的需要来进行调整，可以通过process.env.BASE_API获取到我们在prod.env.js中定义的BASE_API变量。

let api
// npm run dev环境
if (process.env.NODE_ENV === 'development') {
api = '/api/'
// 编译环境
} else {
api = process.env.BASE_API
}

这样就可以通过npm run test命令来打包运行在test环境的代码拉，不需要修改接口地址啦~如果有其他环境的，比如dev，可以按照上文，添加一个bulid-dev.js，然后配置其他的。