vue项目中如何运用webpack动态配置打包多种环境域名-创新互联
这篇文章主要介绍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 strict' module.exports = { NODE_ENV: '"production"', }
修改后的配置:
'use strict' const BUILD_ENV = process.env.BUILD_ENV let baseUrl 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动态配置打包多种环境域名”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:vue项目中如何运用webpack动态配置打包多种环境域名-创新互联
网址分享:http://scyanting.com/article/dchpej.html