Vite中配置环境变量，与Vue2.0类似，都是通过.env文件来实现的。可以通过Vite官方文档先大致了解下环境变量。下面我们会讲解如何配置和使用环境变量。
一、配置
项目根目录中创建 .env.development与 .env.production文件，分别对应开发和生产环境。
文件内容如下：
// 开发环境
VITE_APP_BASE_API = "http://development.cn/"
VITE_APP_TITLE = "[dev]页面标题"
// 生产环境
VITE_APP_BASE_API = "http://production.cn/"
VITE_APP_TITLE = "页面标题"
当执行npm run dev时，会获取 .env.development中的变量作为环境变量，npm run build则会获取.env.production。
如何增加多环境配置？
有时候我们需要通过CI发布到多种不同的环境进行测试、演示，那么我们该如何增加配置环境呢？只要根据规则在根目录增加对应的变量文件，并在package.json中填写对应的命令即可，具体步骤如下：
- 新增
.env.testa
// 测试环境A
VITE_APP_BASE_API = "http://testa.cn/"
VITE_APP_TITLE = "[testa]页面标题"
-
package.json中增加对应命令
{
"name": "myProject",
// ...
"scripts": {
"dev": "vite",
// "dev": "vite --mode testa ", // 也可以在本地开发时使用testa的环境变量
"build": "vite build",
"build:testa": "vite build --mode testa", // 关键是这里的 --mode testa
"preview": "vite preview"
}
//...
}
接下来我们执行npm run build:testa就可以构建出基于.env.testa文件的产物了。
注意：为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_为前缀的变量才会暴露给经过 vite 处理的代码。如果你想修改前缀，请参考官方文档教程。
二、 实际应用
加载的环境变量会通过 import.meta.env 暴露给客户端源码。
aixos配置baseURL
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL, // http://development.cn/
timeout: 5000
})
.vue 文件中使用
为了方便在vue文件中使用，我们可以在main.js中将它挂载到Vue实例上。
import App from './App.vue'
Vue.prototype.$env = import.meta.env
demo.vue
<!-- [dev]页面标题 -->
<div>{{ $env.VITE_APP_TITLE }}</div>
页面中使用
有时候我们需要在html文件中使用环境变量，此时，我们需要借助插件vite-plugin-html来实现。
安装：
npm i vite-plugin-html -D
配置vite.config.js：
import { defineConfig, loadEnv } from 'vite'
import { createHtmlPlugin } from "vite-plugin-html";
const getViteEnv = (mode, target) => {
return loadEnv(mode, process.cwd())[target];
};
export default defineConfig({
plugins: [
createHtmlPlugin({
inject: {
data: {
title: getViteEnv(mode, "VITE_APP_TITLE")
},
},
}),
// ...
]
})
在index.html中使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%- title %></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
关于该组件的具体参数配置，详见官方说明。
