2018/8/24更新:目前VUECLI3.0已经提供了环境变量配置,推荐直接使用。前言vue-cli搭建的项目没有angular-cli标准配置的environment环境依赖,只区分开发模式、单元测试模式和生产模式。//configdev.env.jstest.env.jsprod.env.js一个项目的开发调试过程肯定不止是开发环境和生产环境。由于缺少环境常量,开发者往往需要手动修改BASE_URL,这会导致项目存在多个环境,无法自动构建多出来的环境。axios.defaults.baseURL='http://xxx.xxx.xx.xx/'//换环境api需要手动修改。该方案使用process对象获取Node.js进程启动时的命令行参数(process.argv),匹配当前开发或生产环境常量挂载到process.env。具体实现/config添加env-config.js文件'usestrict'constchalk=require('chalk')/**环境列表,第一个环境为默认环境*envName:表示当前使用的环境*dirName:packaged路径,仅在构建时有用*baseUrl:该环境下API请求的域名*assetsPublicPath:存放静态资源的域名,不指定则使用相对路径**/constENV_LIST=[{envName:'dev',dirName:'dev',baseUrl:'http://192.168.xx.xx:8000/',assetsPublicPath:'./'},{envName:'test',dirName:'test',baseUrl:'http://192.168.xx.xx:8000/',assetsPublicPath:'./'},{envName:'pro',dirName:'pro',baseUrl:'http://webapi.xxx.com/',assetsPublicPath:'。/'},]//获取命令行参数http://nodejs.cn/api/process.html#process_process_argvconstargv=JSON.parse(process.env.npm_config_argv).original||process.argvconstHOST_ENV=argv[2]?argv[2].replace(/[^a-z]+/ig,""):''//如果没有设置环境,默认为第一个constHOST_CONF=HOST_ENV?ENV_LIST.find(item=>item.envName===HOST_ENV):ENV_LIST[0]//将环境常量挂载到process.env.HOST_ENV方便客户端使用process.env.BASE_URL=HOST_CONF.baseUrl//记录选择的变量console.log(chalk.green('当前环境常量:'))console.log(HOST_CONF)module.exports.HOST_CONF=HOST_CONFmodule.exports.ENV_LIST=ENV_LIST//build/webpack.base.conf.js通过webpack插件传递给客户端:[newwebpack.DefinePlugin({'process.env.BASE_URL':'\"'+process.env.BASE_URL+'\"'})],具体使用指定的开发环境,默认是dev环境,envName是config/env-config.js中配置的环境常量,和process.env对应的值。BASE_URL为ENV_LIST中对应的baseUrlnpmrundev--[envName]指定环境打包,输出到dist/[envName]npmrunbuild--[envName]//打包测试环境//本地调试生产环境打包所有环境/package.json"script""build-all":"npmrunbuild--dev&&npmrunbuild--test&&npmrunbuild--pro"目前发现问题命令行参数(process.argv)有保留关键字或被占用,如prod,需要注意避免
