当前位置： 移动技术网 > IT编程>网页制作>CSS > vue favicon.ico正确显示教程（代码）

vue favicon.ico正确显示教程（代码）

2018年04月01日  | 移动技术网IT编程  | 我要评论

2010tvb台庆,云聚达,rrrr333

方法1 修改webpack配置

vue 中修改webpack配置使其正确显示, 版本如下

"vue": "^2.1.9",
"webpack": "^2.2.1",
"html-webpack-plugin": "^2.28.0"

修改文件

webpack.dev.conf.js
    # p
    let path = require('path') // 增加
    new HtmlWebpackPlugin({
      filename: '',
      template: '',
      inject: true,
      favicon: path.resolve('favicon.ico') // 增加
    }),
webpack.prod.conf.js
    # prod
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: '',
      inject: true,
      favicon: path.resolve('favicon.ico'), //新增
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        ...
    }),

以上代码 笔者通过测试, 可以正确展示favicon图标

注意得重新打开dos窗口启动npm run dev

方法2 修改

测试没通过, 待有时间解决做个记录

<head>
    <meta charset="utf-8">
    ...
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
</head>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网