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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vue文件运行的方法教学
Feb 12 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
梳理一下vue中的生命周期
Dec 30 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP生成短网址的3种方法代码实例
2014/07/08 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
js实现页面图片消除效果
2020/03/24 Javascript
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
荷叶母亲教学反思
2014/04/30 职场文书
关于安全的演讲稿
2014/05/09 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
医生个人年度总结
2015/02/28 职场文书
刑事法律意见书
2015/06/04 职场文书
未婚证明范本
2015/06/15 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书