vue.js中怎么添加favicon图标

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图标的详细内容，更多内容请关注技术你好其它相关文章！