• 技术文章 >web前端 >Vue.js

    vue.js中怎么添加favicon图标

    coldplay.xixicoldplay.xixi2020-11-30 13:57:13原创45

    vue.js添加favicon图标的方法:1、修改【index.html】文件,代码为【<link rel="shortcut icon" type="image/x-icon" href="favico】;2、修改webpack配置文件。

    本教程操作环境:windows10系统、vue2.9,本文适用于所有品牌的电脑。

    【相关文章推荐:vue.js

    vue.js添加favicon图标的方法:

    方法一:修改index.html文件

    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

    缺点:打包后需要将favicon.ico复制到根目录

    方法二:修改webpack配置文件

    1、找到build下的webpack.dev.conf.js文件

    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon: path.resolve('favicon.ico') // 新增
    }),

    2、找到build下的webpack.prod.conf.js文件

    new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    favicon: path.resolve('favicon.ico'), //新增
    minify: {
    emoveComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    ...
    }),

    方法三 :vue项目打包后favicon无法正常显示

    解决方法:

    在webpack.prod.config.js中的HtmlWebpackPlugin插件选项中配置favicon选项,其中favicon的路径是个相对路径

    new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    favicon: 'src/assets/img/favicon.ico',
    inject: true
    }),

    修改配置文件后需重启npm run dev

    打包后根目录下就会有favicon.ico

    相关免费学习推荐:JavaScript(视频)

    以上就是vue.js中怎么添加favicon图标的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:vue.js favicon图标
    上一篇:vue.prototype如何使用 下一篇:如何做到刷新vue.js改变数据
    第14期线上培训班

    相关文章推荐

    • PHP获取网站图标(favicon.ico)文件• PHP Google 获取域名的 favicon 图标的代码 • favicon 不只是个图标 • vue小图标favicon不显示怎么办

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网