vue2 根据打包修改favicon.ico
时间: 2023-12-11 20:02:44 浏览: 102
你可以在 `vue.config.js` 文件中配置 `favicon`,如下所示:
```javascript
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].favicon = '/path/to/your/favicon.ico'
return args
})
}
}
```
其中 `path/to/your/favicon.ico` 替换为你的 favicon 文件路径即可。这个配置将在打包时自动替换 `index.html` 文件中的 `favicon`。
相关问题
vue2 根据打包不同 动态修改favicon.ico
你可以在 Vue2 中使用 `html-webpack-plugin` 插件来动态修改 `favicon.ico`。这可以通过以下步骤实现:
1. 安装 `html-webpack-plugin` 插件:
```
npm install html-webpack-plugin --save-dev
```
2. 在 `webpack.config.js` 中引入插件:
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
```
3. 在 `webpack.config.js` 中的 `plugins` 中添加插件:
```javascript
plugins: [
new HtmlWebpackPlugin({
favicon: 'path/to/your/favicon.ico'
})
]
```
这里的 `path/to/your/favicon.ico` 是你要设置的 `favicon.ico` 的路径。
4. 在 `package.json` 中添加一个脚本来指定环境变量,以便在打包时动态修改 `favicon.ico`:
```json
"scripts": {
"build": "NODE_ENV=production webpack"
}
```
5. 在 `index.html` 中添加 `link` 标签来引用 `favicon.ico`:
```html
<link rel="shortcut icon" type="image/x-icon" href="<%= htmlWebpackPlugin.options.favicon %>">
```
这里的 `<%= htmlWebpackPlugin.options.favicon %>` 是在 `plugins` 中设置的 `favicon` 属性。这样就可以根据打包不同动态修改 `favicon.ico` 了。
vue2 根据打包不同 动态修改favicon.ico 还有其他方法么
可以使用 Webpack 的 `favicons-webpack-plugin` 插件来动态生成和注入 favicon。该插件可以根据不同的打包环境,动态生成对应的 favicon.ico 文件,并将其注入到 HTML 文件中。
使用方法如下:
1. 安装插件:`npm install favicons-webpack-plugin --save-dev`
2. 在 Webpack 配置文件中引入插件:`const FaviconsWebpackPlugin = require('favicons-webpack-plugin');`
3. 在 plugins 中添加插件配置:
```
plugins: [
new FaviconsWebpackPlugin({
logo: './src/assets/favicon.png', // 指定 favicon 源文件
outputPath: 'assets/favicons/', // 指定输出目录
prefix: 'assets/favicons/', // 指定 HTML 中访问 favicon 的路径前缀
// 根据不同的打包环境生成不同的 favicon.ico 文件
// 可以根据需要自定义配置
mode: process.env.NODE_ENV === 'production' ? 'webapp' : 'light'
})
]
```
除了使用插件,也可以手动在 HTML 文件中添加 link 标签来引入 favicon:
```
<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" type="image/x-icon">
```
其中 `<%= BASE_URL %>` 是 Vue CLI 自动生成的变量,可以在 `public/index.html` 文件中找到,用于指定项目的根路径。
总之,根据不同的需求和场景,可以选择不同的方法来动态修改和引入 favicon.ico 文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)