vue-cli環境配置

一、環境配置一

vue-cli 2.0腳手架，修改config文件夾里面的dev.env.js，prod.env.js，test.env.js
注意所有value都有單引號里面嵌套雙引號，另外就是開發跨域的就直接跨域，但是配置的時候不要配置'"/api"'，我配置成這樣是報錯的
dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"http://development.com/"' => // 這個就是開發環境的域名
  // API_HOST: '"/api"' => 報錯
})

prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST: '"http://production.com/"', => // 這個就是生產環境的域名
}

test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST_PROD: '"http://test.com/"', => // 這個就是測試環境的域名
}

上面配置完成之后，去到build文件夾，復制一份webpack.prod.conf.js，修改成webpack.test.conf.js，將里面的env常量改成test文件

const env = require('../config/test.env')

在去到package.json文件，復制script里面的build一份，改為test

"scripts": {
    "test": "node build/test.js",
    "build": "node build/build.js"
}

最后去到src下的api文件夾，創建一個文件，修改baseURL

axios.defaults.baseURL = process.env.API_HOST

二、環境配置二

一個大佬的配置
在config文件夾里面修改prod.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST_PROD: '"http://production.com/"',
  API_HOST_DEV: '"http://development.com/"',
  API_HOST_TEST: '"http://test.com/"'
}

然后在main.js文件中配置axios的baseURL

if (location.hostname === 'localhost') {
  axios.defaults.baseURL = process.env.API_HOST_DEV
} else if (location.hostname === 'admin.jiuzhouauto.com') {
  axios.defaults.baseURL = process.env.API_HOST_PROD
} else if (location.hostname === 'devadmin.jiuzhouauto.com') {
  axios.defaults.baseURL = process.env.API_HOST_TEST
}

三、環境配置三

在build文件夾下面配置build-環境.js文件，在里面配置文件類型

process.env.type = '"test"'
// 引入原來的build.js
require('./build')

在package.json里面配置test，同上面的，復制build
在prod.env.js里面配置環境

const target = process.env.npm_lifecycle_event;
if (target == 'test') {
//如果有其他配置也加入在obj中
//24測試環境
var obj = {
  NODE_ENV: '"production"',
  BASE_API: '"http://**test**"',
  // 可以添加其他環境變量
}
}
module.exports = obj