vue-cli4配置标题title和图标favicon.ico

最新推荐文章于 2023-11-17 17:18:30 发布

lala_shine

最新推荐文章于 2023-11-17 17:18:30 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vuejs 文章标签： vue.js vue3 vue-cli4 配置title 配置favicon.ico

本文链接：https://blog.youkuaiyun.com/u013594477/article/details/122166368

vuejs 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何在Vue CLI4项目中配置全局默认标题和设置favicon图标。通过在index.html中添加配置，并在vue.config.js文件中利用chainWebpack进行修改，可以设置项目的默认标题。对于favicon配置，需在index.html中引入链接，并在vue.config.js的pwa插件选项内指定iconPaths。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、配置全局默认标题
（1）首先，在index.html页面增加配置

<title><%= htmlWebpackPlugin.options.title %></title>

（2）vue.config.js文件配置

module.exports = {
    //配置主路径
    publicPath: '/web',
    chainWebpack: config => {
        //设置标题  默认不设置的话是项目名字
        config.plugin('html').tap(args => {
          args[0].title = "默认标题"
          return args
        })
    }
}

以上，chainWebpack中可以设置默认标题

2、vue-cli4 配置favicon.ico
（1）首先在index.html文件配置

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

（2）vue.conflg.js文件配置

// 第三方插件配置
  pluginOptions: {
    // ...
    pwa: {
      iconPaths: {
        favicon32: './favicon.ico',
        favicon16: './favicon.ico',
        appleTouchIcon: './favicon.ico',
        maskIcon: './favicon.ico',
        msTileImage: './favicon.ico'
      }
    },
  }

目录如下：
在这里插入图片描述