部属vue项目,访问路径设置非根,显示白屏

问题:访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”

环境:使用nginx部属vue项目时,没有把访问项目设置为根路径

说明:当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在network中可以看到所有资源都加载完成,index.html会显示“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”信息;
如果将项目的nginx配置访问路径设置成根路径,网站页面可以正常访问,但是请求的返回还是会有这样的信息,这段信息就写在了index.html页面中;
分析原因是vue项目中会有对访问路径的判断,如果不是根路径,就不执行js代码,进而显示白屏。

解决:vue项目,访问路径不是根目录,依照以下几个步骤进行设置,就可以正常访问

  1. 修改vue.config.js,设置pbulicPath路径,
    部属vue项目,访问路径设置非根,显示白屏_第1张图片
  2. 设置路由中的base信息
    部属vue项目,访问路径设置非根,显示白屏_第2张图片
  3. 修改nginx,在serve中设置location /webroot
    部属vue项目,访问路径设置非根,显示白屏_第3张图片

你可能感兴趣的:(前端,html,vue.js,前端,nginx)