Vue3 项目修改index.html的 title

实现思路

通过插件 vite-plugins-html 进行参数配置,html 中使用参数,实现配置

安装插件

$ npm install vite-plugins-html --save-dev

vite.config.js 中的配置

// 可以动态处理html文件内容的
import { createHtmlPlugin } from 'vite-plugin-html'

export default defineConfig(({command,mode})=>{
	return { 
	    // 使用插件进行配置,固定写法,就这么写
	    plugins:[
	        createHtmlPlugin({
	            inject:{
	                data:{
	                    // 这个就是要用到的参数
	                    title:"开发环境的标题",
	                }
	            }
	        })
	    ]
	}
})

index.html 的内容

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

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title><%= title %>title>
head>
<body>
    展示vite对静态图片-svg 的支持
    <br>
    
    <script type="module" src="./main.js" >script>

    
body>
html>

运行效果

Vue3 项目修改index.html的 title_第1张图片

你可能感兴趣的:(JavaWeb,前端,html,前端,vue3修改页面的title)