您的位置:首页 > 科技 > IT业 > vue3 vite title 页面标题设置

vue3 vite title 页面标题设置

2024/10/5 18:32:09 来源:https://blog.csdn.net/m0_55333789/article/details/139253940  浏览:    关键词: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中的变量

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com