如何在 Vue 2 中使用 Webpack 构建时为 favicon.ico 设置自定义根路径前缀
在 Vue 2 使用 Webpack 构建项目时，如果你想给 favicon.ico 设置一个自定义的根路径前缀，你可以通过修改 Webpack 配置文件来实现。这通常涉及到在 vue.config.js 或 Webpack 配置文件中进行设置。
假设你的项目目录中有一个 vue.config.js 文件，下面是如何设置 favicon.ico 的根路径前缀的示例：
vue.config.js配置文件
1. 创建或修改 vue.config.js
在项目的根目录下创建或编辑 vue.config.js 文件：
const path = require('path');
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].favicon = path.resolve(__dirname, 'public', 'favicon.ico');
return args;
});
},
publicPath: '/custom-prefix/', // 设定你的自定义根路径前缀
};2. 修改 index.html
确保你的 public/index.html 文件中引用了 favicon.ico，并且路径是相对的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Vue App</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>3. 配置 publicPath 为根路径前缀
在 vue.config.js 中，你可以通过 publicPath 配置项来设置你的应用程序的根路径前缀。
module.exports = {
publicPath: '/custom-prefix/', // 设定你的自定义根路径前缀
};完成上述步骤后，构建时 favicon.ico 的路径将自动包含你设置的根路径前缀。例如，如果你将 publicPath 设置为 /custom-prefix/，则 favicon.ico 将会被解析为 /custom-prefix/favicon.ico。
4. 运行构建
运行以下命令来构建你的项目：
npm run build通过这些步骤，你就可以在构建时为 favicon.ico 设置自定义的根路径前缀。
webpack.prod.config.js配置文件
如果你使用的是 webpack.prod.config.js 而不是 vue.config.js，你可以直接在 Webpack 配置文件中进行相关的修改。以下是如何在 webpack.prod.config.js 中设置 favicon.ico 的根路径前缀的示例：
1. 修改 webpack.prod.config.js
找到并编辑你的 webpack.prod.config.js 文件，添加或修改 HtmlWebpackPlugin 插件的配置，以便设置 favicon.ico 的路径。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 其他配置项
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/custom-prefix/', // 设置你的自定义根路径前缀
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public', 'index.html'),
favicon: path.resolve(__dirname, 'public', 'favicon.ico'),
}),
// 其他插件
],
// 其他配置项
};2. 修改 index.html
确保你的 public/index.html 文件中引用了 favicon.ico，并且路径是相对的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="<%= htmlWebpackPlugin.files.favicon %>">
<title>Vue App</title>
</head>
<body>
<noscript>
<strong>We're sorry but vue app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>3. 运行构建
确保所有更改保存后，运行以下命令来构建你的项目：
npm run build通过这些步骤，你可以在构建时为 favicon.ico 设置自定义的根路径前缀。这样，favicon.ico 的路径将自动包含你设置的根路径前缀。例如，如果你将 publicPath 设置为 /custom-prefix/，则 favicon.ico 将会被解析为 /custom-prefix/favicon.ico。
