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 相关文章推荐
jQuery JSON的解析方式分享
Apr 05 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
php与js的区别是什么
Aug 05 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
JavaScript修改注册表实例代码
Jan 05 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
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中最容易忘记的一些知识点总结
2013/04/28 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Windows下python3.6.4安装教程
2018/07/31 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
自我评价是什么
2014/01/04 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
名人演讲稿范文
2014/09/16 职场文书
小学生家长意见
2015/06/03 职场文书
校运会加油稿大全
2015/07/22 职场文书
2016年校长新年寄语
2015/08/17 职场文书
小学语文教学反思范文
2016/03/03 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers