美文网首页前端开发vue技术栈
vue项目中配置标题栏title的图标

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

作者: 午后三点的阳光 | 来源:发表于2019-05-22 06:55 被阅读294次
  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的图标

    本文链接:https://www.haomeiwen.com/subject/gnvezqtx.html