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

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

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

相关阅读

相关 vue刷新页面丢失404

解决方案 nginx添加配置文件下面内容加入配置文件 location @rewrites { rewrite ^(.

偏执的太偏执、/ 2022年12月29日 00:13/ 0 赞/ 180 阅读

相关 vue history模式下页面刷新，地址404

原因 vue是单页面应用，history模式路由是通过history.pushState API 实现的，页面刷新时，浏览器是根据请求路径去找对应资源，histor

叁歲伎倆/ 2022年12月27日 07:23/ 0 赞/ 143 阅读

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

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

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

相关 Nginx 代理Vue 刷新 404

Nginx 代理Vue 刷新 404 ![在这里插入图片描述][20210525203624338.png_pic_center] nginx locat

拼搏现实的明天。/ 2022年10月15日 14:56/ 0 赞/ 114 阅读

相关 nginx配置vue-router+webpack项目部署访问刷新出现404问题

部署背景和问题描述项目使用的是vue2.0,vue-route,webpack打包项目部署使用的nginx 问题描述：正常首页不加index可以访问

红太狼/ 2022年06月07日 08:50/ 0 赞/ 339 阅读

相关 vue部署在nginx后刷新404

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

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

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

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

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

相关 vue design pro部署nginx刷新404问题

遇到nginx部署vue design pro的项目，正常访问，但是刷新会404， ![在这里插入图片描述][20200904181745680.png_pic_cente

柔光的暖阳◎/ 2021年09月24日 15:40/ 0 赞/ 344 阅读

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

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

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

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

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

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