网络编程 
首页 > 网络编程 > 浏览文章

vue项目中运用webpack动态配置打包多种环境域名的方法

(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )

在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个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动态配置打包多种环境域名的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:浅谈一个webpack构建速度优化误区
下一篇:Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
一句话新闻
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap