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

问题：访问页面，返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”环境：使用nginx部属vue项目时，没有把访问项目设置为根路径说明：当访问项目对应的nginx配置没有给项目的访问路径设置为根时，页面显示白屏，在network中可以看到所有资

web张

8109人浏览 · 2022-01-25 08:50:57

web张 · 2022-01-25 08:50:57 发布

问题：访问页面，返回“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项目，访问路径不是根目录，依照以下几个步骤进行设置，就可以正常访问

修改vue.config.js，设置pbulicPath路径，
设置路由中的base信息
修改nginx，在serve中设置location /webroot

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^