vue设置自定义logo跟标题

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

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

javascript 复制代码
VITE_APP_TITLE=JBoltAI 物料小助手
VITE_APP_LOGO=/logo.png

安装 vite-plugin-html 插件:

javascript 复制代码
npm install vite-plugin-html --save-dev  

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

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

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>
相关推荐
山河木马几秒前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户9272472502191 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平5 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手7 分钟前
大保剑:Promise的有趣体验
javascript
李大玄7 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵8 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
蓝倾13 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove20 分钟前
常见 npm 报错问题
前端·npm
sunbyte20 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子21 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试