#1.vue-cli 2.x 中

#1.1 配置环境

• webpack 通过 DefinePlugin 内置插件将 process.env 注入到客户端代码中。

// config/dev.env.jsmodule.exports = merge(devEnv, {
  NODE_ENV: '"dev"', // 注意value值需要序列化
  BASE_API: '"http://dev.com"',})

//build/webpack.dev.conf.jsconst env = require('../config/dev.env')...{
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: env,
      },
    }),
  ],}...

• 不同的打包/运行命令，打包/运行不同环境代码的同时将环境变量注入到打包/运行后的代码中 package.json

..."scripts":{
  "dev":"vue-cli-service --mode dev",
  "sit":"vue-cli-service --mode sit",
  "build:dev":"vue-cli-service build --mode dev",
  "build:sit":"vue-cli-service build --mode sit"}...

#1.2 使用环境变量

// main.jsconsole.log("环境变量：" + process.env.NODE_ENV)

#2.vue-cli 3.x 中

#2.1 配置文件

.env                 #在所有的环境中被载入.env.local           #在所有的环境中被载入，但会被git忽略.env.[mode]          #只在指定的模式中被载入，如.env.sit.env.[mode].local    #只在指定的模式中被载入，但会被git忽略，如.env.sit.local

• 1.配置命令

  // package.json"scripts":{
    "serve:dev":"vue-cli-service serve --mode dev", //npm run serve:dev，dev运行命令，默认环境 development
    "build:dev":"vue-cli-service build --mode dev" //npm run build:dev，dev打包命令，默认环境 production}

  1
  2
  3
  4
  5
  

• 2.配置相关环境变量

  // env.devNODE_ENV=devVUE_APP_BASE_URL=http://dev.comVUE_APP_TITLE=宇宙管理系统

  1
  2
  3
  4
  

  注意

  配置的变量需要以VUE_APP_开头，而NODE_ENV和BASE_URL这两个特殊变量除外

• 3.使用相关环境变量

  //vue.config.jsconsole.log(process.env.NODE_ENV) //dev

  1
  2
  

  //src/utils/http.jsaxios.create({
    baseURL: process.env.VUE_APP_BASE_URL, // http://dev.com
    timeout: 500,})

  1
  2
  3
  4
  5
  

• 4.配置文件的权重

  由配置公共配置案例，可以得出结论，相同配置项的权重：

  .env.[mode].local > .env.[mode] > .env.local > .env # 相同配置项权重大的覆盖小的，不同配置项它们会进行合并操作

  1
  

• 
  

  
  
  
  
  

• 
  

  
  
  
  
  

• 5.配置文件的局限性

  只能配置静态变量

  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  

#2.2 环境注入

//vue.config.js{
  ...
  plugins:[
    new webpack.DefinePlugin({
      'process.env':{
        NODE_ENV:JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
  ...}

• 1.配置环境变量

  .env 这样的配置文件无法使用动态参数，这时候我们可以在根目录下新建 config 文件夹用于存放一些额外的配置文件。

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

• 2.注入环境变量

  // vue.config.jsconst envConfig = require("./envConfig")const merge = require("webpack-merge")module.exports ={
    ...
    chainWebpack:config = {
      config.plugin('define')
      .tap(args => {
        let name = 'process.env'
        let env = process.argv[process.argv.length - 1]
        args[0][name] = merge(args[0][name],envConfig[env])
        return args    })
    }
    ...}

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  

• 3.使用环境变量

  {
    "NODE_ENV":"dev",
    "VUE_APP_TITLE":"stage mode2",
    "BASE_URL":"/vue/",
    "$Time":"xxx"}

  1
  2
  3
  4
  5
  6
  

#3.场景应用

#3.1 后端调试

• 背景：有些项目比较复杂，接口 a 依赖接口 b，接口 b 依赖接口 c，中间还有很多页面流程需要走；如果在 postman 中调试接口很麻烦，有很多页面生成的数据要自己造

• 可以借用线上的前端开发环境，页面接口用本地的接口(直接优先使用在浏览器 localStorage 中的变量)

  // commonUrl.jsconst url = "www.xxx.com"if (process.env.NODE_ENV !== "production") {
    url = localStorage.url || url}

  1
  2
  3
  4
  5
  

• 后端可以直接在线上dev环境中配置localStorage.url = 自己本地接口地址，方便调试