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


Posted in Javascript onJune 24, 2019

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

Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
老生常谈ES6中的类
Jul 31 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 #Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 #Javascript
React组件对子组件children进行加强的方法
Jun 23 #Javascript
vue使用websocket的方法实例分析
Jun 22 #Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 #Javascript
js图片查看器插件用法示例
Jun 22 #Javascript
JS实现继承的几种常用方式示例
Jun 22 #Javascript
You might like
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
CSS3教程:background-clip和background-origin
2008/10/17 HTML / CSS
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
新品发布会主持词
2014/04/02 职场文书
大学活动总结模板
2014/07/10 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
检讨书格式
2015/01/23 职场文书
经济纠纷起诉状
2015/05/20 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
详解用Python把PDF转为Word方法总结
2021/04/27 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android