vue 在nginx下页面刷新出现404问题

傷城~ 2022-01-17 02:43 500阅读 0赞

vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决

## 一、vue 在nginx下页面刷新出现404 ##

1、如果是在根目录则配置如下

location / {
    　　root  /；
    　　index index.html;
    　　try_files $uri $uri/ /index.html
    }

2.如果是有特定目录

location /xx/xx/ {
    　　root  /；
    　　index index.html;
    　　try_files $uri $uri/ /xx/xx/index.html
    }

附上官方vue-router的说明：[https://router.vuejs.org/zh-cn/essentials/history-mode.html][https_router.vuejs.org_zh-cn_essentials_history-mode.html]

## 二、vue打包后发布在nginx下，页面加载了js但是页面显示空白 ##

这个问题是因为在配置router的时候没有带上自己的项目的目录，在配置router那里加上项目路径就可以了

1.直接写在router上

export default new Router({
    
      mode: 'history',
      base: '/xx/xxx',
      routes: [
        {
          path: '/',
          name: 'Login',
          component: signIn
        }
      ]
    })

2.写成全局变量在配置文件里，以便发布

export default new Router({
    
      mode: 'history',
      base:env.base_build_path,
      routes: [
        {
          path: '/',
          name: 'Login',
          component: signIn
        }
      ]
    })

注：这个env.base\_build\_path就是配置文件里的一个全局变量，也是项目路径

[https_router.vuejs.org_zh-cn_essentials_history-mode.html]: https://router.vuejs.org/zh-cn/essentials/history-mode.html

发表评论取消回复

表情：

评论列表（有 0 条评论，500人围观）

还没有评论，来说两句吧...

相关阅读

相关刷新vue页面不出现404的方法

最近在做vue项目的时候遇到一个问题，就是执行完一个方法后需要刷新页面才能更新页面的数据，但是调用刷新页面的函数后页面报404了，当然这是在测试环境，本地开发环境是没有这个问题

柔情只为你懂/ 2023年10月11日 23:16/ 0 赞/ 56 阅读

相关 Nginx部署项目，二次刷新页面出现404问题

页面二次刷新后报404错误。针对location 根路径加一句 try\_files $uri $uri/ /index.html =404; 如下所示 locati

╰+攻爆jí腚メ/ 2023年10月08日 05:23/ 0 赞/ 74 阅读

相关 nignx解决vue部署服务器刷新页面出现404问题

> 在部署前后端分离项目项目的时候，有可能会遇到能访问页面，但是刷新页面却404。 ![watermark_type_d3F5LXplbmhlaQ_shadow_50_tex

左手的ㄟ右手/ 2023年09月30日 08:55/ 0 赞/ 33 阅读

相关 vue nginx解决刷新404问题

在nginx中增加 server { listen 88; server_name 10.1.11.35

逃离我推掉我的手/ 2023年03月13日 09:04/ 0 赞/ 41 阅读

相关 Nginx部署Vue项目刷新页面404

vue项目router用的是history模式，用nginx代理服务器部署后只能看到主页，刷新或跳转其他页面就会出现404。解决方法：修改nginx.conf配置文件，将客

柔情只为你懂/ 2023年02月21日 06:45/ 0 赞/ 47 阅读

相关 vue在history模式下刷新页面404

在`vue`的项目中我们为了美化路由而选择`history`模式，但是使用了`history`模式时刷新页面会出现`404`。 import Vue from 'vu

不念不忘少年蓝@/ 2023年02月17日 14:57/ 0 赞/ 49 阅读

相关日常问题---Vue项目部署Nginx后，刷新页面出现404问题

问题： Vue单页应用项目打包部署Nginx服务器后，刷新页面后，出现404。原因：加载单页应用后路由改变均由浏览器处理，而刷新时将会

我不是女神ヾ/ 2022年12月05日 00:45/ 0 赞/ 255 阅读

相关 vue部署在nginx后刷新404

出现这种情况是因为用了history路由模式，vue默认是hash路由的，所以打包前配置一下。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_sh

骑猪看日落/ 2022年04月17日 01:52/ 0 赞/ 364 阅读

相关 vue 在nginx下页面刷新出现404问题

vue 在nginx下页面刷新出现404问题，解决在nginx下页面加载了js但是页面显示空白问题解决一、vue 在nginx下页面刷新出现404 1、如果是在根目录

傷城~/ 2022年01月17日 02:43/ 0 赞/ 501 阅读

相关单页面站点在 Nginx 下刷新报404 的问题

单页面站点在 Nginx 下刷新报404 的问题 location / { root /etc/nginx/html/MY00_COM; t

àì夳堔傛蜴生んèń/ 2021年09月21日 02:52/ 0 赞/ 324 阅读