Vue项目分环境打包的实现步骤


Posted in Javascript onApril 02, 2018

在项目开发中,我们的项目一般分为开发版、测试版、Pre版、Prod版。Vue-cli的默认环境一只有dev和prod两个,之前每次要发布测试版或Pre版都是修改了源码中API地址后打包,这样很麻烦。如果能根据不同环境打包就完美了。网上搜集了许多资料,现在可以分环境打包程序了,至于怎么打,接着住下看吧。

第1步:安装cross-env

在项目目录下运行如下命令安装cross-env,我的ide是webstorm,要以直接在ide里的Terminal窗口中运行,也可能通过windows的CMD、Linux的Terminal定位到项目根目录运行下面的命令。

npm i --save-dev cross-env

第2步:修改各环境下的参数

在config/目录下添加test.env.js、pre.env.js。修改prod.env.js里的内容,修改后的内容如下:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

分别对test.env.js和pre.env.js文件内容进修修改,修改后的内容如下:

'use strict'
module.exports = {
 NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"',
 API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
 NODE_ENV: '"presentation"',
 EVN_CONFIG:'"pre"',
 API_ROOT:'"/pre/apis/train"'
}

对dev.env.js文件内容进行修改,修改后的内容如下。dev环境配制了服务代理,API_ROOT前的api是配制的代理地址。

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})

第3步:修改项目package.json文件

对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

在这里,NODE_ENV最好都设成production,因为在utils.js只做了production一种判定,亲测不会影响各环境API参数。 ##第4步:修改config/index.js

修改config/index.js文件中build参数,这里的参数会在build/webpackage.prod.conf.js中使用到

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require('./prod.env'),
  preEnv: require('./pre.env'),
  testEnv: require('./test.env'),
  //下面为原本的内容,不需要做任何个性
  index:path.resolve(__dirname,'../dist/index.html'),

第5步:在webpackage.prod.conf.js中使用构建环境参数

对build/webpackage.prod.conf.js文件进行修改,调整env常量的生成方式。

// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']

第6步:调整build/build.js

删除process.env.NODE_ENV的赋值,修改spinner的定义,调整后的内容如下:

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容,不需要做任何调整的内容 ...

补充:

vue2+webpack怎样分环境打包

今年有机会做了一个vue2的单页面应用的项目,从开发到上线经历了两个环境。测试环境以及正式环境我都是跑npm run build。这两个环境的变量当前是不一样的,每次打包都要去改变量,感觉有点小麻烦。后来参考同事的,他们项目里面分环境跑不同的命令,得到不同的包。例如测试环境npm run test ,正式环境 npm run build。

需在文件config/prod.env.js配置

const target = process.env.npm_lifecycle_event;
if (target == 'test') {

//测试

var obj = {

NODE_ENV: '"production"',

//post用当前域名

API_ROOT: '""',

//数据字典

API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',

}
}else {

//线上

var obj = {

NODE_ENV: '"production"',

//post用当前域名

API_ROOT: '""',

//数据字典

API_ROOT_DICT:'"http://gw.fdc.com.cn"',

}
}
module.exports = obj;

npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称,比如pretest、test、posttest等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的npm scripts命令编写代码。

总结

以上所述是小编给大家介绍的Vue项目分环境打包的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
表单元素的submit()方法和onsubmit事件应用概述
Feb 01 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
一个仿微博登陆邮箱提示框js开发案例
Jul 28 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
JavaScript 日期时间选择器一些小结
Apr 02 #Javascript
vue计算属性及使用详解
Apr 02 #Javascript
You might like
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python随机数分布random测试
2018/08/27 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python遍历小写英文字母的方法
2019/01/02 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
青春演讲稿范文
2014/05/08 职场文书
初中国旗下的演讲稿
2014/08/28 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
python实现的web监控系统
2021/04/27 Python
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android