美文网首页踩坑笔记
Vue-cli3的favicon修改问题

Vue-cli3的favicon修改问题

作者: 还是流星拳比较好 | 来源:发表于2019-03-12 15:08 被阅读0次

    新的项目用vue-cli3来搭,以前都是用vue-cli2来做,一开始还有些不熟悉。在项目快结束的时候正好需要更换浏览器导航的icon,发现并没有那么简单。。。

    一开始就以为简单的在public文件夹中的index.html中更换:

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

    结果并不起作用。。。在网上找了一堆答案,但是都是vue-cli2的,最后没办法只好回去看官方配置,发现原来是缺少了pwa这个配置(pwa配置在vue-cli3中是在vue.config.js文件中进行),添加以下代码即可更换favicon。

    module.exports = {
      baseUrl     : './',
      outputDir   : 'dist',
      assetsDir   : 'assets',
      devServer   : {...},
      // 以下是pwa配置
      pwa         : {
        iconPaths: {
          favicon32     : 'favicon.ico',
          favicon16     : 'favicon.ico',
          appleTouchIcon: 'favicon.ico',
          maskIcon      : 'favicon.ico',
          msTileImage   : 'favicon.ico'
        }
      }
    }
    

    相关文章

      网友评论

        本文标题:Vue-cli3的favicon修改问题

        本文链接:https://www.haomeiwen.com/subject/emqnpqtx.html