基于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项目分环境打包的实现代码，但愿对你们有所帮助，若是你们有任何疑问请给我留言，小编会及时回复你们的。