vue3+vite项目中使用.env文件环境变量方法

.env文件作用

• .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。
• Vite 会自动加载这些环境变量，并在构建时将它们替换为实际值。

• 必须在项目根目录下创建，跟src目录同级。注意：如果 .env 文件与 src 不在同一级目录下，放在了其他目录，需要在 vite.config.js 文件中配置 .env 文件所在的路径，配 envDir 的值即可。例如：我放在 envConfig 目录中，配置方法如下：
  

命名规则

• .env：所有环境都会加载的文件。
• .env.development：仅在开发环境加载。
• .env.production：仅在生产环境加载。
• .env.test：仅在测试环境加载。

常用的配置项示例

• NODE_ENV：指定当前的 Node.js 运行环境，常见值为 development（开发环境）、production（生产环境）和 test（测试环境）。
• VITE_APP_MODE：自定义的应用模式，可以根据需要设置不同的模式。
• VITE_APP_ROUTER_BASE：单页应用的基路径。如果应用部署在非根路径下（如 /app/），需要将此值设置为对应路径。
• VITE_APP_PUBLIC_URL：静态文件的基路径。确保静态资源（如图片、字体等）能够正确加载。
• VITE_APP_API_BASE_URL：API 请求的基准 URL。确保前端请求能够正确发送到后端服务。
• VITE_APP_PURE_CONSOLE：是否删除代码中的 console.log 语句。0 表示不启用，1 表示启用。
• VITE_APP_DROP_DEBUGGER：是否删除代码中的 debugger 语句。0 表示不启用，1 表示启用。
• VITE_APP_BUNDLE_ANALYZE：是否启用打包体积分析插件。0 表示不启用，1 表示启用。

使用方法

• 在项目中可以通过 import.meta.env.xxxx 来访问这些环境变量

console.log(import.meta.env.VITE_APP_API_BASE_URL)

• 在package.json文件中的scripts下原来的build命令后加 --mode {对应环境}
• 例如：

"build:development": "vue-tsc --noEmit && vite build --mode development",
"build:test": "vue-tsc --noEmit && vite build --mode test",
"build:production": "vue-tsc --noEmit && vite build --mode production",

在build的时候有时可能会遇到环境设置的不生效，提示内容：
NODE_ENV=production is not supported in the .env file. Only NODE_ENV=development is supported to create a development build of your project.
If you need to set process.env.NODE_ENV, you can set it in the Vite config instead.
出现这个问题可能的原因是环境配置中出现了错误的配置，添加了NODE_ENV=production，去掉NODE_ENV=production这项配置即可。

• npm run serve 的时候默认加载 .env.development文件
• npm run build 的时候默认加载 .env.production文件

注意事项

• 变量前缀：只有以 VITE_ 开头的变量才会被 Vite 替换并暴露给客户端代码。这是为了防止意外暴露敏感信息。
• 敏感信息：不要在 .env 文件中存储敏感信息（如 API 密钥、数据库密码等）。这些信息应该通过更安全的方式进行管理。
• .gitignore：确保 .env 文件被添加到 .gitignore 中，避免将敏感信息提交到版本控制系统中。

在vite.config.js文件中读取环境变量方法

• 从vite包中导入loadEnv

import { defineConfig, loadEnv } from 'vite'

• 在defineConfig之前调用loadEnv，传入模式（mode）、基础目录和一些选项

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), '')

  return {
    plugins: [
      vue(),
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
    },
    server: {
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_APP_PORT, // 读取环境变量
          changeOrigin: true,
          pathRewrie: {
            '^/api': ''
          }
        }
      }
    },
  }
})