流程分析:
- 将vue项目打包生成dist文件
- 将dist上传到服务器中
- 上传方式:1:宝塔面板,2:ftp文件上传
- 配置服务器文件
问题描述
vue打之后本地可以正常访问,但上传到服务器中页面空白,且控制台报错:Failed to load resource: the server responded with a status of 403或者451(Forbidden) ;常见情况为:1:网站域名解析到了服务器,但服务器未绑定此域名,2:服务器没有权限访问你上传的文件地址,需将上传文件目录授予访问权限
问题解决
nginx配置文件如下:
listen 80; //监听端口
server_name 服务器ip/访问域名;
index index.php index.html index.htm default.php default.htm default.html;
root /www/wwwroot/PHP/dist; //访问路径,若访问页面空白,需要将当前目录设置为可访问权限
# 根请求会指向的页面
location / {
# 此处的 @router 实际上是引用下面的转发,否则在 Vue 路由刷新时可能会抛出 404
try_files $uri $uri/ @router;
# 请求指向的首页
index index.html;
}
# 由于路由的资源不一定是真实的路径,无法找到具体文件
# 所以需要将请求重写到 index.html 中,然后交给真正的 Vue 路由处理请求资源
location @router {
rewrite ^.*$ /dist/index.html last;
}
若访问界面空白,则修改目录权限名
chmod -R 777 /www/wwwroot/PHP
正常情况下在谷歌游览器下网页已经可以访问,但其他游览器若不能正常访问的话则将nginx配置文件中将user修改为root权限
user root;