vue项目中运用webpack动态配置打包多种环境域名的方法_vue域名设置 - CSDN文库

74 浏览量更新于2023-03-03 评论收藏 46KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

本人分享一个vue项目里，根据命令行输入不同的命令，打包出不同环境域名的方法。需要的朋友跟随小编一起

看看吧

在如今前后端分离，各种框架盛行的前端界，对项目的打包要求也越来越复杂，本人分享一个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动态配置打包多种环境域名的方法,希望对大家有所帮助，如果大家有任

何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

评论0

weixin_38607552

粉丝: 7
资源: 944

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈