vue-cli中浏览器图标的配置

在VUE全家桶项目里面,这里给大家提供了2种方案,进行浏览器图标的配置。

a):先把图片准备好,放在static文件夹下,再找到根目录下的index.html文件,并打开,在HTML文档的<head>标签加入下面代码即可。

    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link rel="apple-touch-icon" href="./static/images/favicon.ico"/>  /*为适应苹果系统配置*/

b):把准备好的图片文件(.ico)放到根目录,修改 build 文件夹下 webpack.prod.conf.js (生产环境)和 webpack.dev.conf.js(开发环境) 文件:

var path = require('path') // 一般vue-cli会自带,当然了,没有的话,再手动引入

// HtmlWebpackPlugin 中添加 favicon
new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  favicon: path.resolve('favicon.ico'), // 引入图片地址
  inject: true
})

最后重新执行npm run dev即可。

****************************************   END   ****************************************

原文地址:https://www.cnblogs.com/silent007/p/9072000.html