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

转载于:https://www.cnblogs.com/zjh-study/p/10723402.html

相关资源：详解vue-cli3多环境打包配置