当我们使用 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>
