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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 Javascript
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
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
7个JS基础知识总结
2014/03/05 Javascript
jquery选择器简述
2015/08/31 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
vue2.0 datepicker使用方法
2018/02/04 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
2019/03/06 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
2019/03/28 Javascript
python支持断点续传的多线程下载示例
2014/01/16 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
python实现神经网络感知器算法
2017/12/20 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
python下载微信公众号相关文章
2019/02/26 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
个人找工作的自我评价
2013/10/17 职场文书
一夜的工作教学反思
2014/02/08 职场文书
教育技术职业规划范文
2014/03/04 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript