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

本文链接：https://blog.youkuaiyun.com/wh20141212/article/details/146260132

有个需求需要在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>