Vue 项目分环境打包的方法示例


Posted in Javascript onAugust 03, 2018

我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用

1、package.json

在build下面添加一个test运行命令

"test": "node build/build.js"

Vue 项目分环境打包的方法示例

2、prod.env.js

在config -> prod.env.js 中修改代码

'use strict'
 // 读取系统运行时候的变量
 const target = process.env.npm_lifecycle_event;
 // 控制台日志输出
 console.log('env is deploying, current env is', target)
 // 判断环境变量,是test,还是build
 if (target == 'test') {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此处替换为测试环境地址"',
  }
 } else {
  var obj = {
   NODE_ENV: '"production"',
   API_ROOT: '"此处替换为测试环境地址"',
  }
 }
  
 module.exports = obj;

3.测试环境:

$ npm run test

正式环境:

```
$ npm run build
```

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
最原始的jQuery注册验证方式
Oct 11 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
如何在vue里添加好看的lottie动画
Aug 02 #Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
You might like
上传多个文件的PHP脚本
2006/11/26 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
javascript call和apply方法
2008/11/24 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
Javascript的闭包详解
2014/12/26 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
js实现点击生成随机div
2020/01/16 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
windows下python安装小白入门教程
2018/09/18 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
error和exception有什么区别
2012/10/02 面试题
函授本科自我鉴定
2013/11/03 职场文书