报错起因

将Vue 路由 设为 history 模式后打包, 首页访问没有任何问题，跳转到子路由 /apollo/search/ 也没有问题，但刷新子路由 /apollo/search/ 就会报错：Uncaught SyntaxError: Unexpected token '<'

查询过程

1. 刚开始以为是 js 打包发布过程中导致的 js 缺失，重新打包发布仍然出现问题，排除此因。
2. 查询后端 nginx 设置是否有问题，询问后端没有问题，排除后端原因
3. 最后查看报错 js 的路径，恍然大悟，正确的路径应该是 https://xxx.xx.com/static/js/chunk-667b74d5.299ea6f7.js；
   但当前报错的路径是 https://xxx.xx.com/apollo/search/static/js/chunk-667b74d5.299ea6f7.js；
   子路由的路径混进去了！！！

解决过程

找到报错原因，解决起来就很简单了，为啥会把静态资源的路径搞错呢，原因就出在 vue.config.js 的配置文件中的 publicPath
因为之前设置了如下配置

module.exports = {
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
}

导致静态资源加载路径都是相对当前界面的，所以才会把子路由的路径加进去导致js找不到而报错。

解决方法

直接去掉vue.config.js 中的 publicPath配置即可，因为 vue-cli 的 publicPath 默认为根路径"/"

我的个人博客有空来坐坐

https://www.wangyanan.online