vue favicon.ico正确显示

简介: 方法1 修改webpack配置 vue 中修改webpack配置使其正确显示, 版本如下"vue": "^2.

方法1 修改webpack配置

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

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

修改文件

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

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

方法2 修改index.html

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

<head>
    <meta charset="utf-8">
    ...
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
</head>
目录
相关文章
|
7天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
11 0
|
7天前
|
资源调度 JavaScript 前端开发
【vue】vue-cli版本选择和比较(vue-cli3.0新版本如何创建项目)
【vue】vue-cli版本选择和比较(vue-cli3.0新版本如何创建项目)
16 1
|
7天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
13 0
|
7天前
|
JavaScript UED
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
【vue】iview组件 DatePicker 日期选择器如何显示默认当前日期
11 1
|
2天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
2天前
|
JavaScript
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
【vue】深入探讨vue中组件间多种传值方式
|
2天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
2天前
|
移动开发 JavaScript 前端开发
Vue Router的介绍与引入
Vue Router的介绍与引入
|
2天前
|
JavaScript 应用服务中间件 nginx
vue中404解决方法
vue中404解决方法
|
2天前
|
JavaScript
Vue 中如何模块化使用 Vuex
Vue 中如何模块化使用 Vuex