Vue3 项目修改index.html的 title

最新推荐文章于 2024-05-31 09:17:46 发布

NorthCastle

最新推荐文章于 2024-05-31 09:17:46 发布

阅读量1.6k

点赞数

分类专栏： JavaWeb 前端文章标签： html 前端 vue3修改页面的title

本文链接：https://blog.csdn.net/qq_39505245/article/details/134514404

版权

JavaWeb 前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

实现思路

通过插件 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><%= title %></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>Document</title> -->
    <title><%= title %></title>
</head>
<body>
    展示vite对静态图片-svg 的支持
    <br>
    <!--引入main.js  -->
    <script type="module" src="./main.js" ></script>

    
</body>
</html>