关于 VUE打包后 在nginx上发布时 刷新报404 的解决方法

最新推荐文章于 2024-04-30 09:00:57 发布
最新推荐文章于 2024-04-30 09:00:57 发布
阅读量479 收藏
点赞数
分类专栏： 前端 vue 文章标签： vue nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21436667/article/details/106123760
版权
前端 同时被 2 个专栏收录
38 篇文章 0 订阅
订阅专栏
vue
3 篇文章 0 订阅
订阅专栏

在nginx的nginx.config文件中 添加

try_files $uri $uri/ /index.html;

然后重启即可正常刷新访问。

shanesco
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目部署在nginx后刷新显示404
qq_43553697的博客
06-02 384
vue打包之后部署之后，刷新页面就显示这样： 然后解决方法是: 我看有的博主只加了第一行，但是我的不行必须加上第二行，这里我也不明白。
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 8503
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
vue项目通过nginx部署，刷新产生404问题的解决
最新发布
huang877620097的博客
04-30 526
vue项目通过nginx部署，刷新产生404问题的解决
vue打包后页面为空白或者路由跳转404解决
qq_24683975的博客
01-10 1876
build后生成的dict文件夹内的index.html打开是空白页面，此时在。编辑nginx配置文件，添加如下代码。
vue项目nginx部署刷新报错404
qq_40096322的博客
09-30 2900
当vue项目打包后,放在nginx内的html文件夹,启动部署后,访问刷新报错404,再次访问就又好了的问题,做出如下两种方式解决。1.修改vue项目的路由router配置文件的模式,将history改为hash即可。2.修改nginx的配置文件nginx.conf,添加如下配置,重启nginx即可。
nginx 配置 client_max_body_size 解决上传大文件的问题
丙火的博客
07-29 1035
解决文件上传HTTP错误（413） 编辑 nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { includ
解决vue打包项目后刷新404的问题
08-27
总之，解决Vue打包后刷新404的问题主要是通过正确配置服务器，确保所有请求都能导向Vue应用的入口HTML文件，让前端路由有机会处理路由跳转。通过理解这一机制，你可以更好地管理和部署Vue应用，提供更流畅的用户体验...
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
08-27
总结起来，解决Vue项目在Tomcat上使用History模式刷新报404错误的步骤包括： 1. 在打包后的项目根目录下创建`WEB-INF`文件夹，并在其中创建`web.xml`。 2. 编写`web.xml`，设置404错误重定向到`index.html`。 3. 在...
vue+webpack 打包文件 404 页面空白的解决方法
11-30
综上所述，解决Vue+Webpack打包后404页面空白的问题，主要涉及到服务器配置（如Nginx的try_files规则）、静态资源路径设置（通过Vue CLI的`publicPath`）以及Babel的正确配置（`.babelrc`文件）。通过调整这些配置，...
vue下使用nginx刷新页面404的问题解决
12-08
出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。 解决方法： 在文件中的nginx.conf文件中修改，代码如下 server ...
vue 打包的静态页面 在nginx下出现404问题
chhnang2016的博客
07-29 1807
参考url :https://blog.csdn.net/weixin_34379433/article/details/91369530 配置nginx如下: location / { root /www/dist; index index.html index.htm; try_files $uri $uri/ /index.html; //映射到ind...
vue使用代理打包之后404，405问题排查
偶尔写些东西，意思一下我也参与了内卷
06-22 6360
后端的接口是正常的，并且进行了域名解析，跨域设置（这里后端的朋友注意下cors跨域)所以只需要模拟出前端环境和运维环境就可以了1、前端npm run build:prod 后生成的dist文件往tomcat- ROOT目录中一丢，ok跑起来了 2、接下来是nginx的配置了...
Vue 打包程序部署到Nginx 点击跳转404
LetCode的专栏
02-03 4431
Vue 打包程序部署到Nginx 点击跳转404
原始Vue+webpack打包后部署nginx报404
qq_38015462的博客
06-01 2683
    项目npm run build 之后直接用nginx做为服务器访问静态页面有下列错误检索页面发现也就是说路径为绝对路径。更改路径的方式在目录中index文件将其更改为相对路径即可或者直接去除“/”也可。然后重新npm run build即可成功访问...
解决 VueCLI3 项目打包上线刷新 404 的问题
hedeqiang
05-15 2641
最近我创建的 极客返利平台 采用前后分离的方式。前端框架主要是 VueCLI 搭建的。 但是项目打包上线以后出现二级页面 404 的问题。例如 /about 页面。刷新就会出现 404 。或者直接复制二级页面重新打开同样也是 404。 最终经过一番搜索，解决方案如下： Nginx 例如使用 Nginx 部署，须做如下修改即可 location /{ error_page 404 /index.html; } 重启 Nginx 即可。 sudo service nginx restart Ap
Vue项目上线后刷新报错404问题（apache，nginx，tomcat）
hellojoy的博客
04-10 1725
https://www.cnblogs.com/sxshaolong/p/10219527.html 一、 Vue项目打包发布apache报错： route，配置一个覆盖所有的路由情况 1、需要修改router/index.js中new Router配置，加一个base: '/htcm_front/', 它指定应用的基路径，该应用是服务于localhost/htcm_front路径下...
vue打包完后Nginx代理(解决vue打包后跨域问题)
热门推荐
a13706935773的专栏
04-20 3万+
vue index.js文件源码'use strict'// Template version: 1.2.7// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { dev: { // Paths assetsSubD...
【踩坑】：vue项目打包，用nginx部署了，但是访问不到页面
TanMengyi的博客
06-15 1万+
最近做的一个vue项目，npm run build打包后，用nginx部署， 打开默认地址： 域名/gcmanager/，跳到了我配置的404页面，如下图： 于是我手动输入页面的路由地址，我本地这个路径都能访问到页面，为部署后却找不到页面了， 这是我路由的index.js文件 分析问题： nignx，需要配置history模式，解决办法有两种： a. 取消路由的 history 模式，把mode:"history"去掉 b.nginx配置location / { try_files $uri $
vue项目部署在nginx 上刷新页面 报404 （已解决）
chs00062的博客
08-24 3328
location / { root/usr/local/app/rsti/rsti-web/; indexindex.html index.htm; try_files $uri $uri/ @router; index ...
vue 路由history模式 项目打包刷新后出现404 apache、nginx环境，如何解决
06-16
在 Vue 路由的 history 模式下，刷新页面会导致 404 错误的出现，这是因为浏览器会向服务器发送请求，但服务器并没有对应的路由，因此就会返回 404 错误。解决这个问题的方法有两种： 1. 配置后端服务器 如果你的 Vue 项目部署在 Apache 或 Nginx 等 Web 服务器上，你可以配置服务器来处理这个问题。具体做法是，在服务器上配置一个重定向规则，将所有的 URL 请求都重定向到 index.html 文件上。以 Apache 服务器为例，可以在 Apache 的配置文件（如 httpd.conf）中添加以下规则： ``` <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule> ``` 这个配置将所有的 URL 请求都重定向到 index.html 文件上，这样即使刷新页面，服务器也会返回正确的内容。 2. 使用 hash 模式 如果你不想在服务器上配置重定向规则，你可以考虑使用 hash 模式。在 hash 模式下，Vue 会使用 URL 中的 # 符号来表示路由，这样即使刷新页面，浏览器也只会重新加载 index.html 文件，而不会向服务器发送请求。要启用 hash 模式，只需要在 Vue 路由的配置中添加以下代码： ``` const router = new VueRouter({ mode: 'hash', routes: [...] }) ``` 这样就可以启用 hash 模式了。需要注意的是，hash 模式下，URL 中的 # 符号后面的内容不会被发送到服务器，因此你需要在前端代码中使用 JavaScript 来解析 URL 中的 hash 值，并根据这个值来渲染不同的页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值