要统一配置系统名称、系统端口号、系统跨域处理等等,在vue3中使用 vite 的环境变量,那么就要创建两个文件 .env.development(开发环境) 和 .env.production(生产环境),这两个文件要在项目的根目录下 ,当然还有测试环境这里就不说了。
// .env.development 配置
# 变量必须以VITE_为前缀才能暴露给外部
NODE_ENV = 'development'
VITE_APP_TITLE = 'Aven'
VITE_APP_BASE_API = '/api'
// .env.production 配置
# 变量必须以VITE_为前缀才能暴露给外部
NODE_ENV = 'production'
VITE_APP_TITLE = '咖啡馆减肥药'
VITE_APP_BASE_API = '/prod-api'
上面就是一些系统的统一配置简单的举例。
当然了,要使用还需要借助一个插件来完成:
npm install vite-plugin-html -D
安装完成,在vite.config.ts中配置:
import { ConfigEnv, UserConfigExport, loadEnv } from 'vite'
// 引入插件
import { createHtmlPlugin } from 'vite-plugin-html'
// 声明一个函数用于获取当前的环境
const getViteEnv = (mode, target) => {
return loadEnv(mode, process.cwd())[target]
}
export default (({ command, mode }: ConfigEnv): UserConfigExport => {
return {
plugins: [
vue(),
......
createHtmlPlugin({
inject: {
data: {
title: getViteEnv(mode, 'VITE_APP_TITLE')
}
}
})
],
}
})
上面配置完成以后,还要再 index.html中修改 title标签:
<title><%- title %></title>
如上,配置完成以后,就会根据环境的不同来显示不同的标题了。