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

最新推荐文章于 2023-12-20 11:14:06 发布

weixin_30778805

最新推荐文章于 2023-12-20 11:14:06 发布

阅读量387

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/silent007/p/9072000.html

本文介绍两种在VUE全家桶项目中配置浏览器图标的方案。一种是直接在index.html文件的<head>标签内添加<link>标签引用静态资源路径；另一种是在webpack配置文件中通过HtmlWebpackPlugin插件设置favicon。

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

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

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
})