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

标签（空格分隔）： vue vue-cli webpack 打包 js

更新

以前的使用一个变量注入到全局,现在的这个方案,只这对调用的`域名url`, 但依然保留开发可以调用任意环境接口, 打包可以打包任意环境代码,关键就是指定的`域名url`根据的一个`env`变量判断

背景

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

环境类型

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

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

用到的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
// npm i yargs@13.3.2 小于这个版本,新版语法不一样
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
  }
}

使用vue-cli3 方案

!注意使用了指定模式, 原来的node_env会被污染,建议在.env文件重新定义

NODE_ENV = 'production'

{
"--mode: 只有开发环境和生产环境,--VUE_APP_END_TYPE: 区分用户端和画师端, --VUE_APP_ENV: 区分打包环境": "",
    "用户端:": "-----------------------------------------------",
"dev": "vue-cli-service serve --mode development --VUE_APP_END_TYPE user --VUE_APP_ENV development",
"build.user.dev": "vue-cli-service build --mode production --VUE_APP_END_TYPE user --VUE_APP_ENV development",
"build.user.test": "vue-cli-service build --mode production --VUE_APP_END_TYPE user --VUE_APP_ENV test",
"build.user.beta": "vue-cli-service build --mode production --VUE_APP_END_TYPE user --VUE_APP_ENV beta",
"build.user.prod": "vue-cli-service build --mode production --VUE_APP_END_TYPE user --VUE_APP_ENV production",
    "画师端:": "-----------------------------------------------",
"dev.painter": "vue-cli-service serve --mode development --VUE_APP_END_TYPE painter --VUE_APP_ENV development",
"build.painter.dev": "vue-cli-service build --mode production --VUE_APP_END_TYPE painter --VUE_APP_ENV development",
"build.painter.test": "vue-cli-service build --mode production --VUE_APP_END_TYPE painter --VUE_APP_ENV test",
"build.painter.beta": "vue-cli-service build --mode production --VUE_APP_END_TYPE painter --VUE_APP_ENV beta",
"build.painter.prod": "vue-cli-service build --mode production --VUE_APP_END_TYPE painter --VUE_APP_ENV production",
}

yyman001 / blog