解决VUE线上报错 Uncaught SyntaxError:Unexpected token …… 刷新后页面白屏

最近发现router在history模式下，二级以上页面刷新后会出现白屏并且报错，如下图：

最终查到方法重新打包完美解决：

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    publicPath: '/',
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }, ……

在build/webpack.prod.conf.js文件的output中新增publicPath:'/'，然后重新打包发布即可。

解决掉后再来仔细看看webpack官方文档对publicPath属性的解释：

该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。默认值是一个空字符串 ""。

在回过头仔细看报错的黄色字体，说那个css文件响应类型不对，然后再细看看加载的CSS路径，豁然开朗，原来却是资源路径加载发生了错误，目录再后退一级正好。

最开始打开首页，然后一步步点击下来，页面间的跳转其实不是通过请求服务器的，而是通过js操作history的API改变地址完成的。但当你刷新了之后浏览器就耿直的去请求服务器了，然而服务器没有这个路由，于是就报错了。

所以最终发现这个问题应该有很多办法去解决的。

参考资料：

http://www.caotama.com/86500.html

https://www.cnblogs.com/xyyt/p/7718867.html

https://www.webpackjs.com/configuration/output/#output-publicpath