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参数)。

 

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

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

 

修改后的配置:

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

  

 

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝赞助

微信钱包赞助

版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!:ABC资源站 » vue项目中运用webpack动态配置打包多种环境域名

切换注册

登录

忘记密码 ?

切换登录

注册