javascript - vue项目动态配置页面favicon图标，使用htmlWebpackPlugins插件，配置后，页面空白，加载不出来，提示js.runtime.xx.js报错?

Question

vue项目动态配置页面favicon图标，使用htmlWebpackPlugins插件，配置后，页面空白，加载不出来，提示js.runtime.xx.js报错
这是public/index.html

vue.config.js代码中的配置是这么写的

报错如下：（页面空白，打开控制台）

有人知道为啥吗

Answer 1

这个和favicon没关系，还没到这一步，是你页面没打开。这个错误一般是访问路径不对，访问js找不到重定向到了html，html第一个字符就是<。看一下你的配置文件中资源路径的设置对不对，因为看你的访问路径带了个gateway。

Answer 2

vue-cli 中可以修改 html-webpack-plugin 的参数, 见Vue CLI 官方文档:

// vue.config.jsmodule.exports = {  chainWebpack: config => {    config      .plugin('html')      .tap(args => {        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]      })  }}

看你的报错截图很明显是 js.runtime.[hash].js 资源没加载正确, 想办法加载正确就好了

Answer 3

根据你提供的图片和描述，我无法直接看到你的代码和错误信息，但我可以根据你描述的问题给出一些可能的解决方案。

首先，确保你的vue.config.js中的配置是正确的。htmlWebpackPlugin的配置应该如下：

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

这将会把你的 favicon 图标设置为项目的 favicon。

然后，确保你的 favicon 图标文件存在，并且位于正确的路径上。在你的例子中，它应该在 src/assets/favicon.ico。

如果你的配置和路径都没有问题，那么问题可能在于你的Webpack版本。在某些版本的Webpack中，html-webpack-plugin可能无法正确处理动态生成的favicon。在这种情况下，你可以尝试升级或降级你的Webpack版本。

如果以上都无法解决你的问题，那么你可能需要查看具体的错误信息。从你提供的图片中，我看到一个错误信息是js.runtime.xx.js报错，这可能是由于Webpack的runtime文件出现问题。你可以尝试删除node_modules文件夹和package-lock.json文件，然后重新运行npm install或yarn install。

如果问题依然存在，你可能需要提供更详细的错误信息以便进行更深入的分析。