vue3 + vite 环境变量踩坑

前言

众所周知，项目搭建过程中，存在环境的区分。一般项目中都会存在env的俩个配置环境变量的配置文件。…

例如以下生产环境、开发环境的环境变量文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//.env.development 生产环境变量文件
# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '/dev-api'

// .env.production
# 生产环境配置
ENV = 'production'

# 生产环境
VUE_APP_BASE_API = '/web-api'

然后在package.json中配置对应环境启动命令用以启动不同环境

1
2
3
4
"scripts": {
   "dev": "vue-cli-service --mode development",
   "build": "vue-cli-service build --mode production",
 },

什么是环境变量？

根据代码运行环境变化而变化的变量就是所谓的环境变量。

在生产环境和开发环境中最多用以区分接口公共BASE_URL_API路径来请求不同接口。

环境变量一般在全局可以访问得到。在vue项目中，常见的环境变量访问方式是以下方式进行获取的：

1
2
3
4
5
// webpack.config.js
module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

其中的process.env.NODE_ENV就是环境变量，他是Node.js提供的API，用以返回获取当前Shall(操作系统和运行环境)所有的环境变量。

vue2+webPack 与 vue3+vite项目搭建获取环境变量的区别：

webpack、vite相似之处

配置都是按照前言所述，创建对应的环境变量的env文件，配置package.json文件中对应环境的启动命令。

webpack中的环境变量

在vue2项目中，webpack做了处理，使得浏览器可以直接识别获取到node环境的process.env变量。

  • 创建方式：配置在项目中env环境变量配置文件中，webpack环境变量可随意命名

  • 获取方式：可以通过***process.env***获取

所以在页面中可以获取相应的环境变量：

1
2
3
//这里就是获取启动或者打包的命令获取对应的配置文件中的变量 
console.log('当前环境是:',process.env.NODE_ENV)

vite中的环境变量

  • 创建方式：vite中环境创建存在俩种，都是在项目中env环境变量配置文件中配置：

    1. 创建以VITE_开头的环境变量

      1
      2
      3
      4
      5
      6
      7
      8
      9
      # 开发环境配置
      NODE_ENV ='development'

      # 开发环境
      VITE_APP_BASE_API = '/dev-api'

      VITE_APP_URL = "http://193.1.1.107:8042"

      VITE_APP_BASE_PORT = "80"

    2. 更换VITE_前缀

      以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。参考官网：

      [共享配置]: https://vitejs.cn/vite3-cn/config/shared-options.html#envdir “VIte官方文档”

      以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中。

      • 类型： string | string[]

      • 默认： VITE_

      • 安全注意事项

        envPrefix 不应被设置为空字符串 ‘ ‘ ，这将暴露你所有的环境变量，导致敏感信息的意外泄漏。 检测到配置为 ‘ ‘ 时 Vite 将会抛出错误.

  • 获取方式：

    Vite是在 import.meta.env对象上暴露当前Shall的环境变量。

    以下是获取对象中常用的内在变量：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 应用运行的模式。
    import.meta.env.MODE: {string} 
    // 部署应用时的基本 URL。他由base配置项决定。
    import. meta.env.BASE_URL: {string} 
    //  应用是否运行在生产环境。
    import. meta.env.PROD: {boolean}
    // 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
    import. meta.env.DEV: {boolean} 
    // 应用是否运行在 
    import.meta.env.SSR: {boolean} server 上。

    注意：以上的变量存在于运行环境中，对应的vite.config中获取不到。

    在 Vite 的配置文件 vite.config.js 中，默认是不加载 .env 文件中的环境变量的。因为正常情况下，只有在评估完 Vite 配置之后，才知道哪些文件需要被加载，比如之前我们提到的root和envDir都会影响到加载的行为。不管如何，如果想要在配置中加载环境变量，可以使用 loadEnv 去加载环境变量。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    import { defineConfig, loadEnv } from "vite";
    import vue from "@vitejs/plugin-vue";
    import path from "path";

    // https://vitejs.dev/config/
    export default defineConfig(({ mode }) => {
      const env = loadEnv(mode, process.cwd(), "");
      console.log(env.VITE_APP_BASE_API);
      const resolve = (dir) => path.resolve(__dirname, dir);
      return {
        base: "./",
        publicPath: resolve("./static"),
        assetsPublicPath: "./",
        plugins: [vue()],
        extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
        resolve: {
          alias: {
            "@": resolve("src"),
          },
        },
        // 本地运行配置，及反向代理配置
        server: {
          host: "127.0.0.1",
          port: 80,
          open: false,
          strictPort: false,
          https: false,
          cors: true,
          proxy: {
            // 代理规则直接放在 server 对象下，而非嵌套的 server 对象中
            [env.VITE_APP_BASE_API]: {
              target: "http://172.1.1.210:8080",
              changeOrigin: true,
              rewrite: (path) => path.replace(new RegExp("^" + env.VITE_APP_BASE_API), "/web-api"), // 替换 /dev-api 为 target 接口地址
            },
          },
        },
      
      };
    });

    注意，mode必须解构后传入loadEnv mode变量中