关于Vue2项目打包部署到Nginx后加载不到静态文件和运行时报Unexpected token的问题

总结

  • 报Unexpected token一般是因为服务器通过打包后的静态资源访问路径找不到对应的资源导致的,
  • 找不到静态文件一般也是打包后的路径找不到对应的资源导致的

解决

二者都可以通过添加vueConfig配置解决如下

在vue.config.js文件中加上如下配置

 /*
      下方配置需要注意!
      如果你的项目中引用了静态文件比如图片路径是   ./ 或者../ 
      打包时候需要求改为 ./ 如果没有人用任何非网络路径的就默认 / 就ok了
  */
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'

但是还有一些特殊情况配置了也会报Unexpected token,例如在路由模式为history且有多个根路径时,需要为每一个根路径配置静态文件目录位置,如下

如果只配置publicPath,访问/front路径下的页面依旧找不到文件(这里是仅配置/路径静态文件地址的情况,如果nginx不配置/路径的静态文件地址,访问/路径及其子页面也会报错)

基于我个人的发现(不一定完全正确),以及解决办法那就是在nginx配置文件中配置所有根路径的静态文件地址

如下配置后即可正常访问了,如果项目需要部署到服务器上,把静态文件资源目录路径改为linux中dist对应目录路径就可以了

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值