Vite - 配置 - 自动修改 index.html 中的title

需求描述

复制代码
在Vue3项目的开发过程中,我们为了能区分正式环境和测试环境,
通常会进行环境配置文件的区分,
例如,开发环境一个配置文件、生产环境一个配置文件。

因此,我们就希望 在项目的index.html 的 title 标签中,能够根据配置文件中的配置显示不同的标题。
例如 : 开发环境下 展示的标题是 : 【开发环境标题】
       生产环境下 展示的标题是 :【正式环境标题】

实现思路

复制代码
vue3 项目默认使用的是 vite 进行项目的构建和管理,
因此本文介绍 vite中的配置。

核心 : 使用 vite-plugins-html 这个插件进行变量的配置,在html中使用变量即可。

插件安装

因为是只在开发时用到,所以只需要将依赖安装到开发时依赖中就行。

插件的引入方式 import { createHtmlPlugin } from 'vite-plugin-html'

插件变量的使用语法 : <%= 变量名 => ,这个语法是 ejs 模板语法,就这么写就行

shell 复制代码
$ npm install vite-plugins-html --save-dev

项目结构

此处的项目结构只展示了主要的内容

复制代码
study-vite
	| -- environment
		| -- vite.base.config.js    # vite的通用配置文件,本案例中无特殊内容
		| -- vite.dev.config.js     # vite 的开发环境的配置文件 
		| -- vite.prod.config.js    # vite的生产环境的配置文件
	| -- index.html                 # 项目的入口页面,就是要修改这个的title
	| -- package.json               # 此文件重点看启动脚本
	| -- vite.config.js             # vite的主配置文件

文件内容

vite.base.config.js

无特殊配置 - 就是一个空的配置

js 复制代码
/**
 * 基础环境配置,目前来讲还没有配置任何的内容
 */

import { defineConfig } from "vite"

export default defineConfig({

})

vite.dev.config.js

这个文件中引入了 vite-plugins-html 插件,进行了参数的配置

js 复制代码
// 开发环境的配置,目前来讲还没有配置任何的内容
import { defineConfig } from "vite"

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

export default defineConfig({ 
    plugins:[ // plugins 表示插件
    	// 使用修改html 的插件
        createHtmlPlugin({
            inject:{
                data:{
                 	// 定义了一个title 变量,可以被html中进行引用
                    title:"开发环境的标题",
                }
            }
        })
    ]
})

vite.prod.config.js

这个文件中引入了 vite-plugins-html 插件,进行了参数的配置

js 复制代码
// 生产环境的配置,目前来讲还没有配置任何的内容
import { defineConfig } from "vite"

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

export default defineConfig({ 
    plugins:[ // plugins 表示插件
    	// 使用修改html 的插件
        createHtmlPlugin({
            inject:{
                data:{
                 	// 定义了一个title 变量,可以被html中进行引用
                    title:"正式环境的标题",
                }
            }
        })
    ]
})

vite.config.js

主要是根据启动脚本的参数加载不通的配置文件

我感觉着这种写法还是非常的优雅的,哈哈哈

js 复制代码
import { defineConfig } from "vite"
// 读取环境变量的
import { loadEnv } from "vite"

// 引入三个环境配置文件
import ViteBaseConfig from "./environment/vite.base.config"
import ViteProdConfig from "./environment/vite.prod.config"
import ViteDevConfig from "./environment/vite.dev.config"

// 策略模式做一个动态的配置
const envResolver = {
    "build":()=>{
        console.log("生产环境")
        // 解构的语法
        return ({...ViteBaseConfig,...ViteProdConfig})
    },
    "serve":()=>{
        console.log("开发环境")
        // 另一种写法
        return Object.assign({},ViteBaseConfig,ViteDevConfig)
    }
}

// 根据 参数 command 的值,使用不同的环境配置文件
export default defineConfig(({command,mode})=>{
    // 根据不同的环境使用不同的配置文件,注意这个地方的写法,非常的奇特
    return envResolver[command]()
})

index.html

html 复制代码
<!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>

package.json

摘取了主要的命令
npm run dev: 执行开发环境
npm run prod: 执行生产环境的打包

json 复制代码
  "scripts": {
    "dev": "vite",
    "prod": "vite build"
  },

运行测试

开发环境运行

shell 复制代码
$ npm run dev

生产环境打包

shell 复制代码
$ npm run prod

打包之后,我们可以看到输出的index.html中title已经直接被替换了,没有问题

html 复制代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>正式环境的标题</title>
<script type="module" crossorigin src="/assets/index-5a650527.js"></script>
</head>
<body>
展示vite对静态图片-svg 的支持
<br>
</body>
</html>
相关推荐
面向星辰11 小时前
html各种常用标签
前端·javascript·html
李昊哲小课1 天前
HTML 完整教程与实践
前端·html
小*-^-*九2 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
hashiqimiya2 天前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu2 天前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
BUG创建者2 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull3 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5
面向星辰3 天前
html中css的四种定位方式
前端·css·html
IT利刃出鞘3 天前
HTML--最简的二级菜单页面
前端·html
yume_sibai3 天前
HTML HTML基础(4)
前端·html