基于Vue + webpack + Vue-cli 实现分环境打包项目

需求由来：我公司项目上线发布至服务器分为三个环境分别为测试环境、预发布环境、生产环境；前期做法是项目通过脚步打包时由脚步把域名和后缀名之类的全部替换成要发布的环境所需要的，因为我公司的项目比较大由许许多多项目通过node分发集成的，后续每添加一个项目就要在发布脚步上更改替换之类的，公司运维觉得很麻烦很浪费时间，于是开会提出分模块打包。通过各种百度、谷歌终于搞定，至于怎么实现，让我们接着住下看：

第1步：安装cross-env

在项目目录下运行如下命令安装cross-env，我的ide编辑器是webstorm，可以直接在ide里的Terminal窗口中运行。

npm i --save-dev cross-env

第2步：因为Vue-cli 只给我们提供了预发布环境和生产环境；这时就需要我们自己再添加一个环境以及修改各环境下的参数

在项目 config 目录下添加 stag.env.js。并且修改自带的 dev.env.js、prod.env.js 里的内容，修改后的内容如下：

1. config/dev.env.js

// dev.env.js
'use strict' const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

2. config/stag.env.js

// stag.env.js
'use strict' const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"stag"'
})

3. config/prod.env.js

// prod.env.js
'use strict' module.exports = {
  NODE_ENV: '"production"'
}

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

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

// 红字部分为添加的
"scripts": {
  "dev": "node build/dev-server.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:dev": "cross-env NODE_ENV=production env_config=dev node build/build.js",
  "build:stag": "cross-env NODE_ENV=production env_config=stag node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
  "e2e": "node test/e2e/runner.js",
  "test": "npm run unit && npm run e2e",
  "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},

在这里，NODE_ENV 最好都设成 production，因为在 utils.j s只做了production一种判定，亲测不会影响各环境API参数。

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

build: {
  // 添加test pre prod 三处环境的配制
  devEnv: require('./dev.env'),
  stagEnv: require('./stag.env.js'),
  prodEnv: require('./prod.env'),
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static'
},

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

对 build/webpackage.prod.conf.js 文件进行修改，根据打包命令匹配env常量的生成方式。

// 红字部分为修改的  绿色为修改部分
const env = config.build[process.env.env_config+'Env']
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/stag.env.js')
//   : config.build.env

第6步：调整build/build.js

注释process.env.NODE_ENV的赋值，且修改spinner的定义，调整后的内容如下：

// 红字部分为添加的  绿色为修改部分
// 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')

// const spinner = ora('building for production...')
const spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()

第7步：对项目主入口 main.js 进行域名赋值操作

建议整个项目的域名和后缀这些都统一管理了即只在一个地方进行赋值操作，其他文件不要有写死的情况命令行分别运行npm run build:dev 、 npm run dev:stag 、npm run dev:prod 在运行打包后的文件看控制台打印的什么就知道哪个环境了

// main.js 动态设置环境
console.log(process.env.NODE_ENV)  // 看输出的是什么就知道是哪个环境了 if (process.env.NODE_ENV === 'development') {
  // dev环境
  window.localStorage.gatewayDomain = 'https://dev-ceshi.lan/'
  window.localStorage.cookieDomain = '.dev-ceshi.lan'
} else if (process.env.NODE_ENV === 'stag') {
  // stag预发布环境
  window.localStorage.gatewayDomain = 'https://stag-ceshi.gc-life.cn/'
  window.localStorage.cookieDomain = '.stag-ceshi.cn'
} else if (process.env.NODE_ENV === 'production') {
  // 生产环境
  window.localStorage.gatewayDomain = 'https://stag-ceshi.com/'
  window.localStorage.cookieDomain = '.stag-ceshi.com'
}

第8步：扩展

问题抛出：当公司更换某个环境的域名和后缀时，这时就尴尬了，假如有20个项目岂不是一个一个项目去改（我公司就有这情况），这时就可以通过后台接口的形式把一些域名之类的通过接口返回前端，一样的道理只需在 main.js 或者 App.vue 里判断环境再分别调用后台接口赋值就行了。

if (process.env.NODE_ENV === 'development') {
  // dev环境
  这里调用接口就行了在进行赋值
}

第9步：测试验证： 修改config/index.js文件中assetsPublicPath参数

// 红色为修改部分
build: {
  // 添加test pre prod 三处环境的配制
  devEnv: require('./dev.env'),
  stagEnv: require('./stag.env.js'),
  prodEnv: require('./prod.env'),
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: './',
  productionSourceMap: true,
}

通过以上修改之后自己就可以在本地测试打包项目在运行index.html文件看控制套打印输出 process.env.NODE_ENV 是什么就能验证了！若打包的文件中图片不能正常显示则修改 build 文件夹下的 utils.js 添加一行代码

// 红色为修改部分
if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'，
　　 publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

以上就是分模块打包所需修改的配置及内容了，亲测有效，我公司所有项目都是这样的，当你需要打包预发布环境时运行npm run build:stag 或者打包生产环境时 运行npm run build:prod 即可，若结合请求的统一管理则更是beautiful 提高代码质量

总结

以上所述是小编给大家介绍的Vue项目分环境打包的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。

秒客网

基于Vue + webpack + Vue-cli 实现分环境打包项目

相关文章