码迷,mamicode.com
首页 > Web开发 > 详细

vuecli2和vuecli3项目中添加网页标题图标

时间:2020-01-15 09:42:12      阅读:487      评论:0      收藏:0      [点我收藏+]

标签:页面   applet   template   项目   目标   配置   文件   mamicode   info   

vuecli2中添加页面标题图标

1. 将favicon.ico放到项目文件夹根目录下;

  技术图片

 

 

2. build/ webpack.dev.conf.js, build/ webpack.prop.conf.js中配置:

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)

new HtmlWebpackPlugin({
      filename: ‘index.html‘,
      template: ‘index.html‘,
      favicon: path.resolve(‘./favicon.ico‘),
      inject: true
    }),

 

3.重启项目

 

vuecli3中添加页面标题图标

1. 将目标图标命名为favicon.ico, 替换掉public文件夹中的favicon.ico.

2. vue.config.js文件中(如果没有可直接新建)加入以下代码:

module.exports = {
  pluginOptions: {
    pwa: {
      iconPaths: {
        favicon32: ‘favicon.ico‘,
        favicon16: ‘favicon.ico‘,
        appleTouchIcon: ‘favicon.ico‘,
        maskIcon: ‘favicon.ico‘,
        msTileImage: ‘favicon.ico‘
      }
    }
  }
}

请注意pwa要放在 pluginOptions里面, 否则无效.

3. 重启项目

vuecli2和vuecli3项目中添加网页标题图标

标签:页面   applet   template   项目   目标   配置   文件   mamicode   info   

原文地址:https://www.cnblogs.com/qiezuimh/p/11982184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!