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>
相关推荐
花海如潮淹6 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界9 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui