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

    需求描述

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    实现思路

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

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

    • 1
    • 2
    • 3
    • 4

    插件安装

    因为是只在开发时用到，所以只需要将依赖安装到开发时依赖中就行。
    插件的引入方式 import { createHtmlPlugin } from 'vite-plugin-html'
    插件变量的使用语法 ： <%= 变量名 => ，这个语法是 ejs 模板语法，就这么写就行

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

    • 1

    项目结构

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

    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的主配置文件

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    文件内容

    vite.base.config.js

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

    /**
 * 基础环境配置，目前来讲还没有配置任何的内容
 */

import { defineConfig } from "vite"

export default defineConfig({

})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    vite.dev.config.js

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

    // 开发环境的配置，目前来讲还没有配置任何的内容
import { defineConfig } from "vite"

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    vite.prod.config.js

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

    // 生产环境的配置，目前来讲还没有配置任何的内容
import { defineConfig } from "vite"

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    vite.config.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]()
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    index.html

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    package.json

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

      "scripts": {
    "dev": "vite",
    "prod": "vite build"
  },

    • 1
    • 2
    • 3
    • 4

    运行测试

    开发环境运行

    $ npm run dev

    • 1

    在这里插入图片描述

    生产环境打包

    $ npm run prod

    • 1

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

  • 相关阅读:
    【微信小程序】缓存数据库操作类——prototype和ES6方法
    【无标题】
    实验4 图像空间滤波
    01.初识C语言1
    【毕业设计】27-基于单片机的家庭监控及防盗报警_热释电报警_人体系统工程设计（原理图+源代码+仿真+实物照片+答辩论文）
    【微信小程序开发】IDE安装使用- Hello Cocos
    趣学python编程 (四、数据结构和算法介绍)
    1.6 分组延时，丢失和吞吐量
    数据结构 冒泡排序 选择排序 学习笔记
    MySQL数据库基础知识回顾
  • 原文地址：https://blog.csdn.net/qq_39505245/article/details/134513268