Vue项目分环境打包的实现步骤
转:https://blog.csdn.net/xinzi11243094/article/details/80521878
方法一:亲测真的有效
在项目开发中,我们的项目一般分为开发版、测试版、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里的内容,修改后的内容如下:
1
2
3
4
5
6
|
'use strict' module.exports = { NODE_ENV: '"production"' , EVN_CONFIG: '"prod"' , API_ROOT: '"/apis/v1"' } |
分别对test.env.js和pre.env.js文件内容进修修改,修改后的内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
'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是配制的代理地址。
1
2
3
4
5
|
module.exports = merge(prodEnv, { NODE_ENV: '"development"' , VN_CONFIG: '"dev"' , API_ROOT: '"api/apis/v1"' }) |
第3步:修改项目package.json文件
对package.json文件中的scripts内容进行个性,添加上新定义的几种环境的打包过程,里的参数与前面的调协保持一致。
1
2
3
4
5
6
7
8
|
"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中使用到
1
2
3
4
5
6
7
8
|
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常量的生成方式。
1
2
3
|
// 个性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的定义,调整后的内容如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
'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() //更多的其它内容,不需要做任何调整的内容 ... |
方法二: 此法只需要改变 prod.env.js一个文件,还没尝试,下次尝试一遍下来分享心得
vue2+webpack怎样分环境打包
今年有机会做了一个vue2的单页面应用的项目,从开发到上线经历了两个环境。测试环境以及正式环境我都是跑npm run build。这两个环境的变量当前是不一样的,每次打包都要去改变量,感觉有点小麻烦。后来参考同事的,他们项目里面分环境跑不同的命令,得到不同的包。例如测试环境npm run test ,正式环境 npm run build。
需在文件config/prod.env.js配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
const target = process.env.npm_lifecycle_event; if (target == 'test' ) { //测试 var obj = { NODE_ENV: '"production"' , //post用当前域名 API_ROOT: '""' , //数据字典 } } else { //线上 var obj = { NODE_ENV: '"production"' , //post用当前域名 API_ROOT: '""' , //数据字典 } } module.exports = obj; |
npm 提供一个npm_lifecycle_event变量,返回当前正在运行的脚本名称,比如pretest、test、posttest等等。所以,可以利用这个变量,在同一个脚本文件里面,为不同的npm scripts命令编写代码。
最新文章
- Java泛型详解 转载
- 记一次ASP.NET网站的入侵和如何避免被入侵
- 灵活QinQ配置
- jquery之stop()的用法
- 内省(二)之BeanUtils工具类
- .Net IOC 之Unity
- 关于JavaScript语法的小笔记
- day 12 装饰器
- spec文件中的 %pre %post %preun %postun
- ubuntu 忽略文件的50unattended升级问题
- MySQL数据库一些常用命令
- ubuntu创建用户的两种方式
- 收藏一篇 Python 文本框操作命令
- jquery 同步ajax
- [pytorch]pytorch loss function 总结
- Bridge 桥接
- Git 简史
- 【laravel5.4】重定向带参数
- Java:类集框架中集合的学习
- android整理的一些基础知识
热门文章
- HUSTOJ:5500 &;&; 洛谷:P1412:经营与开发
- Python并发编程之谈谈线程中的“锁机制”(三)
- c#连接oracle数据库底层方法
- 【小o地图Excel插件版】不止能做图表,还能抓58、大众点评网页数据...
- Java开发笔记(五十二)对象的类型检查
- php设计模式--面向对象编程规范PSR
- Java 浅拷贝和深拷贝
- java.lang.NoSuchFieldError异常
- pthread_once()函数详解
- Android冷启动优化