vue3在静态资源index.html文件里面注入变量（VITE_APP_BASE

vue3在静态资源index.html文件里面注入变量（VITE_APP_BASE_API）

有个需求需要在vue3的index.html页面中使用VITE_APP_BASE_API做环境判断，然后引入不同的js文件

1.安装vite-plugin-html

npm install vite-plugin-html --save-dev

2.在项目根目录里面env.development文件中

# 应用端口
VITE_APP_PORT=3000# 代理前缀
VITE_APP_BASE_API= https://api.youlai.tech # 线上# 环境
VITE_APP_API_URL=development

3.在main.ts 文件中

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import WindiCSS from "vite-plugin-windicss";
import { createHtmlPlugin } from "vite-plugin-html";// https://vite.dev/config/
import { createHtmlPlugin } from 'vite-plugin-html'
export default ({ mode, command }: { mode: any, command:any }) => {const env = loadEnv(mode, process.cwd())return defineConfig({plugins: [vue(),createHtmlPlugin({inject: {data: {VITE_ENV: env.VITE_APP_API_URL,  },},})],css: {preprocessorOptions: {scss: {api: "modern-compiler", // 修改api调用方式additionalData: `@use "@/styles/variables.scss" as *;`, // 导出全局变量和 mixin},},},})
}

4.在index.html文件中

<!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_ENV === 'test') { %><script type="module" src="example1.ts"></script><% } else {%><script type="module" src="example2.ts"></script><% } %><title>test</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>