vue设置自定义logo跟标题

news2025/3/25 19:18:09

准备 Logo 图片将自定义的 Logo 图片（如 logo.png）放置在项目的 public文件夹下。

使用环境变量设置 Logo 和标题（可选）创建或修改 .env 文件在项目根目录下创建或修改 .env 文件，添加以下内容：

VITE_APP_TITLE=JBoltAI 物料小助手
VITE_APP_LOGO=/logo.png

安装 vite-plugin-html 插件：

npm install vite-plugin-html --save-dev

然后在 vite.config.js 中配置插件：

import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'
import {createHtmlPlugin} from "vite-plugin-html";

const customerElements = [
    "chat-message",
    'chat-message-panel',
    'chat-opt-panel',
    'chat-tip',
    'msg-tip',
    'reference-item'
]

export default defineConfig(({command, mode}) =>{
    const env = loadEnv(mode, process.cwd(), 'VITE_')
    return {
        plugins: [
            vue({
                template: {
                    compilerOptions: {
                        isCustomElement: tag => customerElements.some(item => item == tag)
                    }
                }
            }),
            createSvgIconsPlugin({
                // 指定需要缓存的图标文件夹
                iconDirs: [resolve(process.cwd(), 'src/assets/svg-icon/local')],
                // 指定symbolId格式
                symbolId: `icon-[name]`,
                // 是否压缩
                svgoOptions: true
            }),
            createHtmlPlugin({
                inject: {
                    data: {
                        ...env
                    },
                },
            }),
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'),
                '~': resolve(__dirname)
            },
        },
        server: {
            host: '0.0.0.0',
            port: 3206,
            open: true
        },
    }
})

修改 public/index.html 文件 HTML

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="<%- VITE_APP_LOGO %>">
  <title><%- VITE_APP_TITLE %></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>