vue-cli多环境配置打包项目

vue vue-cli webpack 打包 js

背景

当我们要正式部署项目的时候,需要打包项目.一般最最简陋可以分为`开发环境`和`正式环境`,这跟公司团体的原因,有不同.但常规上应该还有个`测试环境`,如果要列出全部,大概有以下

环境类型

• 正式环境
• 预发布环境(一些团队也把这个当做为正式环境的测试或备份环境)
• 测试环境
• 开发环境

那么问题来了?如何设置打包配置分别根据不同环境打包?今天的内容就是为了解决这个

用到的npm包

• yargs

使用打包命令来区分不同环境

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build:test": "node build/build.js --NODE_ENV test",
    "build:dev": "node build/build.js --NODE_ENV dev",
    "build:prod": "node build/build.js --NODE_ENV prod"
  },

我们通过不同build的参数来打包,那么如何获取打包参数?(当前环境NODE_ENV,这里为了规范使用NODE_ENV,当然你可以使用 如: env 之类)
脚本参数--NODE_ENV XXX, 当然这里的dev和prod 不建议用缩写,但不强制(vue-cli 内部很多都是全称,改一字需要改很多配置)
那么如--NODE_ENV test就是代码打包测试环境的包,那怎么才可以获取到这个test?.这里需要更改用到的npm包yargs, 运行 npm -i yargs -D
我们可以写一个测试脚本来获取写这个看是否成功

// demo.js
const argv = require('yargs').argv
const NODE_ENV = argv.NODE_ENV //为脚本 --NODE_ENV 参数名
console.log(`当前环境变量NODE_ENV:${NODE_ENV}`) // 输出`demo`
// 运行
node demo.js --NODE_ENV demo

测试完成.下面开始配置
1.在build文件夹下添加一个webpack.env.conf.js配置文件,用于获取运行node命令脚本获取到的参数

// webpack.env.conf.js
/**
 * 根据脚本环境变量导入配置
 */
const argv = require('yargs').argv
const NODE_ENV = argv.NODE_ENV
const envConfig = `../config/${NODE_ENV}.env.js`
module.exports = require(envConfig)

2.屏蔽原来打包写死的环境变量文件,打开build/build.js

// build.js
// 注释下面代码
process.env.NODE_ENV = 'production'

3.修改打包文件build/webpack.prod.conf.js
修改为

// webpack.prod.conf.js
// 添加环境配置文件
const env = require('../config/prod.env') // 其实可以删除
const envConfig = require('./webpack.env.conf')

修改env判断变量

// webpack.prod.conf.js
    new webpack.DefinePlugin({
      // 'process.env': env,
      'process.env': envConfig
    })

至此,已经可以了.
当然我们请求api,根据不同的 env 变量请求不同的服务器地址
如:

export function getIp () {
  console.warn('当前环境: process.env', process.env.NODE_ENV)
  switch (process.env.NODE_ENV) {
    case 'test':
      return IP.test
    case 'dev':
      return IP.dev
    case 'prod':
      return IP.prod
    default:
    // why ? 要是process.env.NODE_ENV不存在怎么办?
      console.warn('getIp:异常错误')
      break
  }
}