vue部署正式环境上传nginx后遇到的问题及解决
更新时间：2025年12月25日 09:10:43 作者：鹤入云霄
在Nginx中配置服务器时,如果页面和静态资源无法访问,并且后端接口被误解为前端页面请求,可以通过为`www-data`用户赋予目录访问权限来解决
页面不能访问
在nginx中server中添加配置
重启nginx：sudo systemctl restart nginx
root /home/admin/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}页面仍不能访问 & 静态资源无法访问 & GET https://xxx.js net::ERR_ABORTED 403 (Forbidden)
找到nginx中第一行user用户（默认www-data）
执行如下命令为www-data用户赋予目录访问权限
sudo chown -R www-data:www-data /home/user/dist
后端接口无法访问 & 访问后端接口被理解成前端页面请求
在nginx中server中添加配置
重启nginx
location /api {
proxy_pass http://IP:PORT;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章将介绍使用Vue2开发前后端分离项目时,前端打包部署后可动态修改后端接口地址的解决方法,文中通过图文结合的方式介绍的非常详细,需要的朋友可以参考下2024-07-07
Moment.js 是一个 JavaScript 日期处理类库，用于解析、检验、操作、以及显示日期。这篇文章主要给大家介绍了关于vue利用Moment插件格式化时间的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要为大家详细介绍了Vue+Element-UI实现上传图片并压缩功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了Vue手写实现异步更新详解，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助2022-08-08
这篇文章主要介绍了Vue.js按键修饰符及v-model修饰符，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
在本篇文章里小编给大家整理了一篇关于Vue首屏性能优化组件知识点总结，有需要的朋友们可以跟着学习下。2021-11-11
掌握Qwik.js,轻松应对前端SSR渲染问题！本指南将为你揭示如何使用这款强大的框架,让你在前端开发中游刃有余2023-12-12
这篇文章主要介绍了vue-cli3和element做一个简单的登陆页面本文实例图文相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
这篇文章主要给大家介绍了关于Vue关闭当前弹窗页面的两种方式,这是最近项目中遇到的一个需求,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue实现设置图片不转为base64的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
最新评论