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