目录
- vue访问路径设置非根显示白屏
- 解决
- vue部署到非根目录设置
- 需要修改三处配置
vue访问路径设置非根显示白屏 问题：
【部属vue项目|部属vue项目,访问路径设置非根,显示白屏的解决方案】访问页面，返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”环境：
使用nginx部属vue项目时，没有把访问项目设置为根路径
说明：
当访问项目对应的nginx配置没有给项目的访问路径设置为根时，页面显示白屏，在network中可以看到所有资源都加载完成，
index.html会显示如果将项目的nginx配置访问路径设置成根路径，网站页面可以正常访问，但是请求的返回还是会有这样的信息，这段信息就写在了index.html页面中；
“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.”信息；
分析原因是vue项目中会有对访问路径的判断，如果不是根路径，就不执行js代码，进而显示白屏。
解决
vue项目，访问路径不是根目录，依照以下几个步骤进行设置，就可以正常访问
1.修改vue.config.js，设置pbulicPath路径
文章图片
2.设置路由中的base信息
文章图片
3.修改nginx，在serve中设置location /webroot
文章图片
vue部署到非根目录设置 假设部署到根目录下app文件夹里
需要修改三处配置
1.config => index.js
// PathsassetsRoot: path.resolve(__dirname, "../dist"),assetsSubDirectory: "static",assetsPublicPath: "/app/", //修改打包后路径修改这里
把 assetsPublicPath: "/", 修改成 assetsPublicPath: "/app/",
2.router => index.js
const router = new Router({mode: "history",// base: getAbsolutePath(),base: "/app/",routes: [...]......
增加基础路径 base:"/app/"
3.网站根目录文件夹下修改配置文件，用的是IIS
修改
为
这样就可以了，亲测没有问题。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
