解决本地nginx部署vue项目只能访问默认页面问题

已于 2022-08-22 15:56:41 修改
阅读量4k 收藏 9
点赞数 9
分类专栏： 前端资源与工具 文章标签： vue.js nginx 前端
于 2022-08-08 11:59:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46243043/article/details/126224982
版权

问题：

用vue打包生成dist文件夹，然后在本地nginx部署vue项目时只能访问默认页面，刷新和跳转页面都会出问题。
在这里插入图片描述
在这里插入图片描述

原因：

只访问了dist文件下的 index.html、index.htm页面，而其他页面在访问的时候被nginx当作自身的服务访问而找不到，我们修改一下配置文件。

方法：

添加上 try_files $uri $uri/ /index.html;
在这里插入图片描述

Windows服务器上用NGINX部署vue项目
洋成林
02-27 2万+
背景：项目前端vue 2.0 + elementUI，后端spring boot 2.0.3，服务器是Windows 8。此处默认数据库已经安装到位。 1、服务器上安装NGINX，参考https://blog.csdn.net/yangfengjueqi/article/details/87973698 2、后端项目生成可执行jar包，参考https://blog.csdn.net/yangf...
Nginx部署Vue项目的详细解析
m0_74079648的博客
10-26 1257
通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。从准备工作、构建Vue项目、上传静态文件到服务器、配置Nginx，到测试并重新加载Nginx，再到高级配置和常见问题与解决方案，我们一步步地完成了整个部署过程。希望这些内容能够帮助你顺利地将Vue项目部署到Nginx服务器上，并在实际工作中进一步优化部署方案。九、总结通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。
解决nginx部署vue项目只能访问默认页面问题
yzwdzkn的博客
01-27 5258
在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果直接访问就会出现404 可以看到nginx并不识别vue的其他页面，这跟conf文件的配置有关 location / { root C:/web/dist; index index.html index.htm; } 这是我们基础的配置，按照字义解读就是只访问了/dist文件下的 index.html、index.htm页面，而其他页面在
Vue项目中访问指定链接并解析页面内容的完整指南
百锦再的博客
03-25 1万+
在现代Web开发中，经常需要从其他网页获取并解析内容。本文将详细介绍如何在Vue项目中实现这一功能，包括从访问外部链接到解析展示内容的完整流程。// 在usePageParser.js中添加try {return {})})return {})// 在parseContent中使用// ...其他解析逻辑return {// ...其他结果架构设计前后端分离，使用代理解决CORS问题组件化设计提高可维护性组合式函数封装核心逻辑功能实现支持静态和动态页面获取。
nginx配置不生效，页面一直是默认页面welcome to nginx的解决办法
weixin_34413802的博客
08-27 1万+
ubuntu下nginx的配置文件所在目录： /etc/nginx 对nginx的配置 server { listen 80; server_name example.com; root /var/www/example;//这里是你网站程序的路径 location / { try_f...
nginx部署Vue项目只能访问首页，访问其他路径404
qq_38157433的博客
02-05 1246
上述配置中，try_files指令会尝试查找请求的文件，如果文件不存在，就会将请求重定向到/index.html。直接访问其他目录时“https://test/example”，报404。访问网站首页没问题，即网站根目录“http://test.com”，在Nginx配置中添加一个用于处理前端路由的规则。nginx部署Vue，
nginx部署vue只能访问默认页面的问题
安余生的博客
03-31 6809
在通过nginx启动vue以后我们在访问页面的时候只能访问默认页面和通过项目内跳转其他页面，如果刷新就会404 通过默认页面内部访问： 直接刷新： 可以看到nginx并不识别vue的其他页面，这跟conf文件的配置有关 location / { root /home/nx/dist; index index.html index....
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
综上所述，解决nginx部署Vue项目时找不到js和css文件的问题，关键在于正确设置Webpack打包时资源引用的基础路径。对于vue-cli@3，你需要在vue.config.js中配置baseUrl；而对于vue-cli@2，则需要修改config/index.js...
《Nginx怎么部署vue项目》
GoppViper的博客
09-06 1894
打开cmd，输入重启命令：nginx -s reload （若配置文件没做修改可忽略这一步）好了，以上就是《Nginx部署vue项目》的全部内容，关注我看更多有意思的文章哦！完成上一步后，打开我们的配置文件，找到节点，修改参数。另外，多版本的nginx可以共存，只要设置web端口不一样就可以同时使用。到前端项目目录下，找到文件夹。复制下的文件，粘贴至nginx根目录下的。在vue代码目录下运行命令：npm run build。conf目录下有默认配置文件nginx.conf。
vue项目部署到nginx/tomcat服务器的实现
10-16
部署Vue项目到Nginx/Tomcat涉及将构建生成的静态资源文件托管在服务器上，并确保应用能够正确地处理前端路由。 在Vue项目中，默认情况下，路由是通过hash模式来实现的，即URL中会有'#'符号。但为了美观，我们通常...
在nginx上部署vue项目(history模式)的方法
11-30
对于Apache服务器，可以通过`.htaccess`配置文件来解决这个问题。配置如下： ```apacheconf RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f ...
ubuntu下nginx配置不生效，页面一直是默认页面welcome to nginx
han_xiao_xiao的博客
05-26 4028
在ubuntu上配置了nginx，在windows里边直接替换html目录就可以显示替换后的界面。 解决方案：比较简单粗暴 1.使用可视化图形传输界面把windows下的nginx.conf替换了ubuntu里的nginx.conf 其中，windows下的nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log log
关于解决Vue项目启动后，只能访问vue默认页面，无法访问项目中其他页面的问题
weixin_42893818的博客
05-27 1万+
方法很简单，只要在index.js中的Router实例中添加一个mode:"history"属性即可。
vue2 - 解决本地nginx部署vue项目只能访问默认页面问题
qq_43526329的博客
10-24 1251
解决本地nginx部署vue项目只能访问默认页面问题
解决vue项目在宝塔上部署后只能访问index.html页面的问题
wxg1314tzm的博客
03-19 1060
解决宝塔部署vue项目后只能访问index.html页面的问题
vue nginx配置默认路径，nginx默认配置
lizhen_software的博客
05-22 6307
我们开发一个系统的2.0版本，之前的版本是纯静态页面，比如登录是：login.html,列表页：list.html。我们2.0版本是用vue的单页面实现的，路由用的vue-router,要求是如果访问我们之前的某个页面的话，要直接跳转到我们现在的登录页面。因为我们公司所有外网访问的都有一个跳板机，跳板机再指向目标机器，目标机器上配置相关路径，因为目标机器的路径配置的是带前缀的，用vue官网的那个方...
vue部署在nginx存在的问题
wangyadong1314的博客
08-09 476
后来发现问题，就是本地配置的地址和nginx的对不上，与此同时打包的路径和nginx部署的路径也对不上。最近遇见一个问题需要前端自己部署，自己以前也没有部署过，不太会使用nginx，现在记录下来。1. 打包dist后部署在nginx上后没有生效，页面一直处重定向的404页面。以后遇见此类情况可以参考，不可以照抄。
Vue启动后，只能访问vue默认页面，怎么才能访问项目页面呢
热门推荐
qq_42423727的博客
03-20 1万+
Vue启动后，只能访问vue默认页面，怎么才能访问项目页面呢 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能...
nginx部署前端vue项目但是仍是默认页面
最新发布
04-03
### 配置 Nginx 正确部署 Vue 前端项目的解决方案 当使用 Nginx 部署 Vue.js 构建的前端项目时，如果遇到显示默认页面而非实际应用的情况，通常是因为 Nginx 的配置未正确指向构建后的静态文件目录或者缺少必要的路由重写规则。 以下是详细的配置方法： #### 1. 确保 Vue 项目已成功构建 在部署之前，需确认 Vue 项目已经通过 `npm run build` 或类似的命令完成打包操作。这会生成一个名为 `dist` 的文件夹，其中包含了所有的静态资源文件[^1]。 #### 2. 修改 Nginx 配置文件 编辑 Nginx 的站点配置文件（一般位于 `/etc/nginx/sites-available/your-site-config`），并按照以下模板调整设置： ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/dist; # 替换为您的 dist 文件夹路径 index index.html; location / { try_files $uri /index.html; # 路由重定向支持单页应用 (SPA) } location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?)$ { # 提高静态文件缓存效率 expires max; add_header Cache-Control "public, must-revalidate"; } } ``` 上述配置中的关键部分在于 `try_files $uri /index.html` 这一行，它确保即使访问的是动态路由地址也能被正确解析到 Vue 应用入口文件 `index.html` 中[^2]。 #### 3. 测试与重启服务 保存修改过的配置文件之后，先运行下面这条指令来验证语法是否有误： ```bash sudo nginx -t ``` 如果没有错误提示，则可以重新加载 Nginx 来使更改生效： ```bash sudo systemctl reload nginx ``` 至此，应该能够正常浏览所部署的 Vue 前端项目而不再看到 Nginx 默认欢迎界面了。 --- ### 注意事项 - 如果仍然无法解决问题，请检查防火墙设置以及服务器上的其他可能干扰因素。 - 对于 HTTPS 请求的支持也需要额外安装 SSL/TLS 证书，并相应更新上面提到的服务监听端口至 443 和启用加密传输协议选项。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderkey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值