vue3 + vite 环境变量踩坑

前言

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

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

//.env.development 生产环境变量文件
# 开发环境配置
ENV = 'development'
​
# 开发环境
VUE_APP_BASE_API = '/dev-api'
​
// .env.production
# 生产环境配置
ENV = 'production'
​
# 生产环境
VUE_APP_BASE_API = '/web-api'
​

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

 "scripts": {
    "dev": "vue-cli-service --mode development",
    "build": "vue-cli-service build --mode production",
  },

什么是环境变量？

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

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

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

// 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环境变量可随意命名

• 获取方式：可以通过<u>process.env</u>获取

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

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

vite中的环境变量

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

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

     # 开发环境配置
     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的环境变量。

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

  // 应用运行的模式。
  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 去加载环境变量。

  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变量中-->