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中的变量