需求:根据使用环境显示对应的标题和icon
先在根目录建个plugins/vite-plugin-title-html.ts
文件内容如下:
/**
* 替换html里面的标题和icon
*/
type HtmlTemplate = {
title?: string,
icon?: string
}
export default function vitePluginHtmlTitle({ title, icon }: HtmlTemplate) {
return {
// 申明的插件名
name: 'vite-plugin-title',
// 转换 index.html 的专用钩子。钩子接收当前的 HTML 字符串和转换上下文。
transformIndexHtml(html: string): string | Promise<string> {
if (!title) return html
const reg = /<title>(.*)<\/title>/gm;
const iconRegex = /<link\s+rel="icon"\s+href="([^"]+)"/i;
if (icon) {
const match = html.match(iconRegex)
if (match) {
// 有就替换
html = html.replace(
iconRegex,
`<link rel="icon" href="${icon}"`
);
} else {
// 如果没有找到匹配项,新增<link rel="icon" href="...">
const newLink = `<link rel="icon" href="${icon}">\n</head>`
html = html.replace(/<\/head>/i, newLink)
}
}
return html.replace(reg, `<title>${title}</title>`);
},
};
}
在vite.config.ts里面引入自定义插件
import { ConfigEnv, defineConfig, UserConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
// 手写动态设置页面的title
import vitePluginTitleHtml from './plugins/vite-plugin-title-html'
export default defineConfig((config: ConfigEnv): UserConfig => {
const root = process.cwd()
const viteEnv = wrapperEnv(loadEnv(config.mode, root, 'VITE_'))
return {
root,
server: {
open: viteEnv.VITE_APP_OPEN,
port: viteEnv.VITE_PORT,
proxy: {
[viteEnv.VITE_APP_BASE_API]: {
target: viteEnv.VITE_APP_API,
changeOrigin: true
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
// 导入时想要省略的扩展名列表
extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
build: {
outDir: 'dist',
// 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求,默认4096kb
assetsInlineLimit: 10240
},
plugins: [
vue(),
// 设置页面title和icon
vitePluginTitleHtml({
title: viteEnv.VITE_APP_TITLE,
icon: '/favicon.ico'
})
],
// 配置公共样式
css: {
preprocessorOptions: {
scss: {
// 全局的scss
additionalData: `@import "@/styles/var.scss";`
}
},
// 自己修改生成的hash值名称
modules: {
// 配置css模块化,name是文件名,local是类名,hash是hash值
generateScopedName: '[name]_[local]_[hash:5]'
}
}
}
})