总结
- 报Unexpected token一般是因为服务器通过打包后的静态资源访问路径找不到对应的资源导致的,
- 找不到静态文件一般也是打包后的路径找不到对应的资源导致的
解决
二者都可以通过添加vueConfig配置解决如下
在vue.config.js文件中加上如下配置
/*
下方配置需要注意!
如果你的项目中引用了静态文件比如图片路径是 ./ 或者../
打包时候需要求改为 ./ 如果没有人用任何非网络路径的就默认 / 就ok了
*/
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
但是还有一些特殊情况配置了也会报Unexpected token,例如在路由模式为history且有多个根路径时,需要为每一个根路径配置静态文件目录位置,如下
如果只配置publicPath,访问/front路径下的页面依旧找不到文件(这里是仅配置/路径静态文件地址的情况,如果nginx不配置/路径的静态文件地址,访问/路径及其子页面也会报错)
基于我个人的发现(不一定完全正确),以及解决办法那就是在nginx配置文件中配置所有根路径的静态文件地址
如下配置后即可正常访问了,如果项目需要部署到服务器上,把静态文件资源目录路径改为linux中dist对应目录路径就可以了