在项目开发中, 我们的项目一般分为开发版, 测试版, 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 项目分环境打包的实现代码, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/137610.htm