vue获取动态域名vue项目中运用webpack动态配置打包多种环境域名

在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。(欢迎纠错，谢谢。)

1. 安装插件 cross-env，npm install cross-env --save -dev，用于配置命令行输入命令。

2. 修改package.json里的script命令：

配置了test(测试)，ready(预发布)，prod(正式)三种环境，npm run build 默认设置成 npm run build:prod，也可以根据自己需求，配置更多的命令，参数自定。网上看到有人去修改NODE_ENV这个默认的参数，配置文件里有很多地方都引用了这个参数。本人认为这个默认参数可以不改，自己重新增加一个参数就行(这里增加一个BUILD_ENV参数)。

"scripts": {"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","start": "npm run dev","unit": "jest --config test/unit/jest.conf.js --coverage","e2e": "node test/e2e/runner.js","test": "npm run unit && npm run e2e","build": "npm run build:prod","build:test": "cross-env NODE_ENV=production BUILD_ENV=test node build/build.js","build:ready": "cross-env NODE_ENV=production BUILD_ENV=ready node build/build.js","build:prod": "cross-env NODE_ENV=production BUILD_ENV=prod node build/build.js"},

3. 修改config目录下的prod.env.js

里面的默认配置是这样：只有一个NODE_ENV

use strictmodule.exports={

NODE_ENV:"production",

}

修改后的配置：

use strictconst BUILD_ENV=process.env.BUILD_ENV

let baseUrlswitch(BUILD_ENV) {case test:

baseUrl= api.test.com

break;case ready:

baseUrl= api.ready.com

break;case prod:

baseUrl= api.prod.com

break;

}

module.exports={

NODE_ENV:"production",

BUILD_ENV:" + BUILD_ENV + ",

baseUrl:" + baseUrl + ",

}

修改的配置增加了BUILD_ENV和baseUrl两个属性，属性值记得拼接双引号，process.env.BUILD_ENV就是命令行里输入的BUILD_ENV的值，再根据BUILD_ENV进行相应的判断。在项目里，就可以通过process.env拿到prod.env.js暴露出去的3个属性。比如接口文件，就需要process.env.baseUrl来动态修改不同环境域名。

————————————————

版权声明：本文为CSDN博主「weixin_39541044」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_39541044/article/details/111815563