前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目更换favicon.ico

vue项目更换favicon.ico

作者头像
kirin
发布2020-08-13 10:53:24
4.1K0
发布2020-08-13 10:53:24
举报
文章被收录于专栏:Kirin博客

1、icon命名为favicon.ico放在项目的位置:src/assets/favicon.ico

2、在index.html中写入: <link rel=”shortcut icon” type=”image/x-icon” href=”src/assets/favicon.ico” media=”screen” >

代码语言:javascript
复制
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>文档资源后台管理 V1.0.0</title>

    <link rel="shortcut icon" type="image/x-icon" href="src/assets/favicon.ico" media="screen" >

  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、修改build下面webpack.prod.conf.js和webpack.dev.conf.js:

webpack.prod.conf.js:(   favicon: path.resolve(‘src/assets/favicon.ico’), // 引入图片地址  )

代码语言:javascript
复制
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      favicon: path.resolve('src/assets/favicon.ico'), // 引入图片地址
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

webpack.dev.conf.js:(   favicon: path.resolve(‘src/assets/favicon.ico’), // 引入图片地址  )

代码语言:javascript
复制
   // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: path.resolve('src/assets/favicon.ico'), // 引入图片地址 
    }),

4、重新运行

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/08/11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档