vue项目中配置标题栏title的图标

  1. 在项目根目录下的 index.html 文件的title 标签中添加标题栏文字
  2. 将图片文件favicon.ico 放在项目根目录下
  3. 修改 build 文件夹下 webpack.dev.conf.js 和 webpack.prod.conf.js 文件的配置
    // HtmlWebpackPlugin 中添加 favicon
    // path为引入的模块const path = require('path')
    webpack.dev.conf.js文件:
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  favicon: path.resolve('favicon.ico') //添加该行
})

webpack.prod.conf.js文件:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
  template: 'index.html',
  inject: true,
  favicon: path.resolve('favicon.ico') //添加该行
  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'
})
  1. 重启项目即可

你可能感兴趣的:(vue项目中配置标题栏title的图标)