报错起因

将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

Logo

前往低代码交流专区

更多推荐