vue项目中配置favicon图标实现

最新推荐文章于 2024-05-06 16:38:25 发布

前端菜鸟-张晓震

最新推荐文章于 2024-05-06 16:38:25 发布

阅读量654

点赞数

分类专栏： vue项目中配置favicon图标文章标签： vue

本文链接：https://blog.csdn.net/qq_42074281/article/details/104691518

版权

vue项目中配置favicon图标专栏收录该内容

1 篇文章 0 订阅

订阅专栏

如上图所示，页面顶部的小图标会让页面显得高大上，一般把这种图标叫做favicon图标。利用vue-cli脚手架搭建的项目，如果不手动配置，页面中是不会显示favicon图标。

1，开发环境配置打开build/webpack.dev.conf.js

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'index.html',
    inject: true,
    favicon:'图片地址',//复制这个
 }),

2，开发环境配置打开build/webpack.prod.conf.js

new HtmlWebpackPlugin({
    filename: process.env.NODE_ENV === 'testing'
      ? 'index.html'
      : config.build.index,
    template: 'index.html',
     favicon:'图片地址',//复制这个
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
    },
    chunksSortMode: 'dependency'
}),