vue.js中怎么添加favicon图标

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

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

【相关文章推荐: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(视频)

关于作者: 宏图SEO小编

为您推荐

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注