vue3 中环境变量

vue3.x 中配置比较简单，请移步官方文档

对 env 文件夹的配置点这里

vue2 配置环境变量

vue cli 会自动去根目录找 .env 开头的配置文件并读取配置

配置以键值对的形式存在

对不同的环境，会根据文件的名称读取 .env.[NODE_ENV]

.env.[NODE_ENV].local 文档不应该提交到 git 上，它是本地化配置，默认会在 .gitignore 文件中配置，请勿删除

需要更详细的说明请移步官方文档

测试版本

• ⚡ vue@2.7.16
• ⚡ dotenv@16.4.5

说明

一般来说，vue cli 会帮我们读取 VUE_APP_ 开头的配置，其他配置将不会加载到客户端

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

以上两个变量一般不会被 .env.* 文件中的配置覆盖

修改默认前缀

vue 内部使用 dotenv 这个工具去实现环境变量配置，本质还是通过 webpack 的 DefinePlugin 去配置变量，在vue.config.js 中表现为一个名为 define 的插件，所以，我们可以做如下配置：

scripts/dev.js

exports.useDotEnv = function useDotEnv(config) {
  const dotenv = require("dotenv");
  const path = require("path");
  const fs = require("fs");
​
  const reg = new RegExp(
    `^.env(.${process.env.NODE_ENV})?${
      process.env.NODE_ENV === "development" ? "(.local)?" : ""
    }$`
  );
​
  const dirs = fs
    .readdirSync(path.resolve(process.cwd(), "./env"))
    .filter((name) => reg.test(name))
    .map((n) => path.resolve(process.cwd(), `./env/${n}`));
​
  const env = dotenv.config({ path: dirs, override: true }).parsed;
  Reflect.ownKeys(env).forEach((key) => {
    env[key] = JSON.stringify(env[key]);
  });
​
  config.plugin("define").tap((args) => {
    args.forEach((arg) => {
      if (Reflect.has(arg, "process.env")) {
        Reflect.set(arg, "process.env", { ...env, ...arg["process.env"] });
      }
    });
    return args;
  });
};

vue.config.js

const { defineConfig } = require("@vue/cli-service");
const { useDotEnv } = require("./scripts/dev");
module.exports = defineConfig({
  publicPath: "./",
  transpileDependencies: true,
  chainWebpack: (config) => {
    useDotEnv(config);
  },
});

即在根目录中新建 env 文件夹去统一管理，当然，也可以将这个文件目录以形参的方式暴露给外界配置，这里就不多赘述了。