vue3 vite title 页面标题设置

效果图：

1. 安装 vite-plugin-html 插件

npm install vite-plugin-html -D

2. 修改 vite.config.js

import {defineConfig, loadEnv} from 'vite'
import { createHtmlPlugin } from "vite-plugin-html"
import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({mode, command, ssrBuild}) => {
        const root = process.cwd();
        const env = loadEnv(mode, root);
        return {
            plugins: [
                vue(),
                //修改index.html标题
                createHtmlPlugin({
                    inject: {
                        data: {
                            title: env.VITE_APP_API_TITLE,
                        },
                    },
                }),
            ],
            resolve: {//路径别名
                alias: {
                    '@': resolve(__dirname, './src')
                }
            },
            server: {
                proxy: {
                    [env.VITE_APP_BASE_API]: {
                        // target: 'http://localhost:3001',
                        changeOrigin: true,
                        rewrite: path => path.replace(env.VITE_APP_BASE_API, '')
                    }
                },
                hmr: {
                    overlay: false, // 禁用开发服务器错误的屏蔽
                },
            },
            build: {
                minify: "terser", // 混淆器，terser 构建后文件体积更小，'terser' | 'esbuild'
                rollupOptions: {
                    output: {
                        // 最小化拆分包
                        manualChunks(id) {
                            if (id.includes("node_modules")) {
                                return id
                                    .toString()
                                    .split("node_modules/")[1]
                                    .split("/")[0]
                                    .toString();
                            }
                        },
                        chunkFileNames: "js/[name].[hash].js", // 用于命名代码拆分时创建的共享块的输出命名，[name]表示文件名,[hash]表示该文件内容hash值
                    },
                },
                terserOptions: {
                    // 生产环境移除console打印
                    compress: {
                        drop_console: true,
                        drop_debugger: true,
                    },
                    // 去掉注释内容
                    output: {
                        comments: true,
                    },
                }
            }
        }
    }
)

index.html 的内容

<title><%= title %></title>
上述语法使用 vite.config.js中的变量