【Vue3+Vite3】加载环境变量

当我们使用 env 文件来适配开发和生产环境的配置时，需要这样做：

1、检查 env 文件是否在项目的根目录

默认和 index.html 都放在根目录

• .env.development
• .env.production

2、检查 env 文件内容

.env.* 的内容每行一个 key=value，value 以 VITE_ 开头，例如：

VITE_APIKEY='123456'

3、检查 package.json 的 scripts

scripts 这一块一般不用修改

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。

参考：官方 Vite 情景配置

4、在 vite.config.js 中使用 loadEnv 加载 env 配置

在 vite.config.js 这里加载是全局生效的，对于多页面场景来说比较有用，如果不想全局生效，则在页面中单独加载

使用 loadEnv 加载前的代码

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://cn.vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: "0.0.0.0",
    port: 8080,
    strictPort: true
  },
  logLevel: 'info',
})

使用 loadEnv 加载后的代码

import { fileURLToPath, URL } from 'node:url'
// 引入 loadEnv
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://cn.vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  // 启动时根据 command 和 mode 加载 env 内容，全局生效
  const env = loadEnv(mode, process.cwd(), "VITE_")
  // 启动时打印 key 的内容
  // console.log(env.VITE_APIKEY)
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      host: "0.0.0.0",
      port: 8080,
      strictPort: true
    },
    logLevel: 'info',
  }
}
)

5、在 template 中使用 env 的 key

<script lang="ts" setup>
const apikey = import.meta.env.VITE_OPENAI_API_KEY
console.log("apikey:" + apikey)
</script>