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

Question

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

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

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

有人知道为啥吗

Answer 1

问题出在这里，这个js的引入不对，之前写的是js[name]的形式，所以导致js无法正常加载，但是我后面尝试把它改成js.[name]也依然不行，后面我就继续找文档，发现改成具体的字段就行，不能用[name]的形式去生成

Answer 2

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

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

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

Answer 3

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