How to add favicon icon in vue.js

How to add favicon icon to vue.js: 1. Modify the [index.html] file, the code is [

The operating environment of this tutorial: windows10 system, vue2.9, this article applies to all brands of computers.

【Recommended related articles: vue.js】

How to add favicon icon in vue.js:

Method One: Modify the index.html file

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

Disadvantage: You need to copy favicon.ico to the root directory after packaging

Method Two: Modify the webpack configuration file

1. Find the webpack.dev.conf.js file under build

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

2. Find the webpack.prod.conf.js file under build

new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: path.resolve('favicon.ico'), //新增
minify: {
emoveComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
...
}),

Method 3: The favicon cannot be displayed normally after the vue project is packaged

Solution:

HtmlWebpackPlugin plug-in option in webpack.prod.config.js Configure the favicon option in, where the path of the favicon is a relative path

new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
inject: true
}),

You need to restart after modifying the configuration filenpm run dev

There will be a favicon in the root directory after packaging. ico

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to add favicon icon in vue.js. For more information, please follow other related articles on the PHP Chinese website!