vue项目中运用webpack动态配置打包多种环境域名的方法
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。(欢迎纠错,谢谢。)
1.安装插件cross-env,npminstallcross-env--save-dev,用于配置命令行输入命令。
2.修改package.json里的script命令:
配置了test(测试),ready(预发布),prod(正式)三种环境,npmrunbuild默认设置成npmrunbuild:prod,也可以根据自己需求,配置更多的命令,参数自定。网上看到有人去修改NODE_ENV这个默认的参数,配置文件里有很多地方都引用了这个参数。本人认为这个默认参数可以不改,自己重新增加一个参数就行(这里增加一个BUILD_ENV参数)。
"scripts":{ "dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js", "start":"npmrundev", "unit":"jest--configtest/unit/jest.conf.js--coverage", "e2e":"nodetest/e2e/runner.js", "test":"npmrununit&&npmrune2e", "build":"npmrunbuild:prod", "build:test":"cross-envNODE_ENV=productionBUILD_ENV=testnodebuild/build.js", "build:ready":"cross-envNODE_ENV=productionBUILD_ENV=readynodebuild/build.js", "build:prod":"cross-envNODE_ENV=productionBUILD_ENV=prodnodebuild/build.js" },
3.修改config目录下的prod.env.js
里面的默认配置是这样:只有一个NODE_ENV
'usestrict' module.exports={ NODE_ENV:'"production"', }
修改后的配置:
'usestrict' constBUILD_ENV=process.env.BUILD_ENV letbaseUrl switch(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来动态修改不同环境域名。
总结
以上所述是小编给大家介绍的vue项目中运用webpack动态配置打包多种环境域名的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!