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

傷城~ 2022-01-17 02:43 464阅读 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 条评论，464人围观）

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

相关阅读

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

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

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

相关 vue nginx解决刷新404问题

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

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

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

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

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

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

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

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

相关 vue路由history模式下页面刷新404问题

问题描述： vue单页面应用的路由为history模式时，刷新页面后时常会404。问题分析：页面刷新时会重新向服务器发起请求，因是单页面应用，故仅存在一个页面，非

r囧r小猫/ 2023年02月11日 04:41/ 0 赞/ 6 阅读

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

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

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

相关 vue部署在nginx后刷新404

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

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

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

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

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

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

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

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

相关 Vue history模式刷新页面404问题

为什么会出现404 我们先来看一下我们给到后端的`dist`文件 ![8ace095ca3a41d4151425046e0c7950a.png][] 可以

Bertha 。/ 2021年09月08日 17:58/ 0 赞/ 822 阅读