背景：
基于Vue3 + Vite搭建前端项目，在项目开发的过程中需要使用外部js、css文件，并且在本地运行和线上打包时加载的js、css路径不同。那么就需要根据环境变量来判断如何加载js、css文件，本文主要讲述基于Vue3搭建的项目如何在index.html中使用环境变量。
实现：
1.下载插件
npm i vite-plugin-html -D
2.在vite.config.ts中进行配置
import { createHtmlPlugin } from 'vite-plugin-html'
export default ({ mode, command }: { mode: any, command:any }) => {
const env = loadEnv(mode, process.cwd())
return defineConfig({
plugins: [
createHtmlPlugin({
/**
* 需要注入 index.html ejs 模版的数据
*/
inject: {
data: {
VITE_BUILD_MODE: env.VITE_BUILD_MODE,
},
},
})
]
})
}
3.在index.html中注入的环境变量,根据不同环境变量加载不同css文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<% if (VITE_BUILD_MODE === 'test') { %>
<link rel="stylesheet" type="text/css" href="https://test.com.cn/style1.css" />
<% } else {%>
<link rel="stylesheet" type="text/css" href="https://test.com.cn/style2.css" />
<% } %>
<title>test</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
总结
至此，就可以在index.html中实现不同环境处理加载不同资源啦。本方案适用于Vue3搭建的项目，如叙述有问题，欢迎大家及时指正。
