nginx部署vue页面白屏或刷新404问题解决

 更新时间:2023年10月25日 10:25:47   作者:YG·玉方  
最近部署vue项目后发现刷新页面会404,本文就来介绍一下nginx部署vue页面白屏或刷新404问题解决,具有一定的参考价值,感兴趣的可以了解一下

项目场景:

将vue项目打包部署到nginx上面运行

问题描述

问题一:运行时页面白屏。

问题二:页面可以正常显示,当刷新页面的时候页面报404错误。

原因分析:

页面白屏分析:我们可以先查看一下nginx下的 logs/error.log 日志文件,确定我的问题是因为项目打包时候路劲配置问题。

页面404分析:我们在将 vue项目打包部署时,地址栏的地址只是 vue的路由,并不是真正的文件目录地址。所有的路由都是依赖于 SPA单页应用的index.html,所以当我们在刷新时,按照地址栏的地址,找不到对应的文件,就产生404。

解决方案:

页面白屏解决:

配置vue项目根目录下的vue.config.js文件,代码如下:

const { defineConfig } = require('@vue/cli-service')

// 打包配置
module.exports = {
  transpileDependencies: true, // 配置需要被 Babel 转译的依赖项。
  publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : './',
  outputDir: "dist", //输出文件目录
  assetsDir: "static", //静态资源文件名称
  productionSourceMap: false, //去除打包后js的map文件
  lintOnSave: false,
  runtimeCompiler: false,//去掉console

  // 解决跨域
  devServer: {
    host:"127.0.0.1:xxxx",// 以上的ip和端口是我们本机的;下面为需要跨域的
    proxy: { //配置跨域 		
      '/api': {
        target: " ", //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        secure: false, // 如果是https接口,需要配置这个参数
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    },
    historyApiFallback: true,
  }
}

页面404解决:

配置nginx中conf目录下的nginx.conf文件,代码如下:

location /dist {
	alias html/dist;
	index  index.html index.htm;
	try_files  $uri $uri/ /dist/index.html;
}

location @router {
	rewrite ^.*$ /dist/index.html;
}

解释:当我们访问一个地址为 http://localhost:8056/dist/AssetChanges的时候先通过alias 确定路径 html/dist,然后通过try_files配置,首先会在html/dist下去找 $uri,也就是login这个文件,这个时候因为没有login文件,就会去找 $uri/ ,也就是 /login/ 这个文件目录,如果还是没找到,就会将其重定向到 @router,在定义的 @router 里,我们将其都指向 /dist 文件夹下的 index.html。这样就成功解决问题

到此这篇关于nginx部署vue页面白屏或刷新404问题解决的文章就介绍到这了,更多相关nginx部署vue 404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解nginx进程锁的实现

    详解nginx进程锁的实现

    nginx是多进程并发模型的应用,但为了网络请求的安全性,必须要使用到锁,那么这个进程锁如何实现呢
    2021-06-06
  • Nginx服务器的安装与一些基本配置总结

    Nginx服务器的安装与一些基本配置总结

    这篇文章主要介绍了Nginx服务器的安装与一些基本配置总结,包括静态化与负载均衡等重要设置的方法记录,需要的朋友可以参考下
    2015-11-11
  • Nginx出现“Too many open files”问题的解决方法

    Nginx出现“Too many open files”问题的解决方法

    在进行压力测试时,自建CDN节点的Nginx可能会出现“Too many open files”错误,这通常意味着Nginx尝试打开的文件数量超出了系统的限制,本文将详细介绍如何识别和解决这一问题,确保Nginx在负载较高时仍能正常运行,需要的朋友可以参考下
    2024-10-10
  • 在Nginx服务器上屏蔽IP的一些基本配置方法分享

    在Nginx服务器上屏蔽IP的一些基本配置方法分享

    这篇文章主要介绍了在Nginx服务器上屏蔽IP的一些基本配置方法分享,包括对过多访问的IP配置脚本屏蔽等一些小技巧,的朋友可以参考下
    2015-12-12
  • 详细聊聊K8s容器内nginx带变量的域名解析

    详细聊聊K8s容器内nginx带变量的域名解析

    这篇文章主要给大家介绍了关于K8s容器内nginx带变量域名的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-01-01
  • Nginx服务器中HTTP 301跳转到带www的域名的方法

    Nginx服务器中HTTP 301跳转到带www的域名的方法

    这篇文章主要介绍了Nginx服务器中HTTP 301跳转到带www的域名的方法,包括从HTTPS 301提示跳转等rewrite相关的方法,需要的朋友可以参考下
    2015-07-07
  • nginx 如何实现读写限流的方法

    nginx 如何实现读写限流的方法

    这篇文章主要介绍了nginx 如何实现读写限流的方法的相关资料,这里提供实例代码及如何配置,需要的朋友可以参考下
    2016-12-12
  • Nginx反向代理多个服务器的实现方法

    Nginx反向代理多个服务器的实现方法

    这篇文章主要介绍了Nginx反向代理多个服务器的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Nginx配置SSL证书的实现步骤

    Nginx配置SSL证书的实现步骤

    本文详细介绍了如何为Nginx服务器配置SSL证书,确保通过HTTPS安全访问,步骤包括DNS解析验证、下载和安装SSL证书、安装Nginx、配置nginx.conf文件以及设置HTTPS重定向,感兴趣的可以了解一下
    2024-09-09
  • Nginx和Apache几种防盗链配置方法实例

    Nginx和Apache几种防盗链配置方法实例

    这篇文章主要介绍了Nginx和Apache几种防盗链配置方法实例,本文使用判断来路的方法实现防盗链,分别给出Nginx和Apache配置实例,需要的朋友可以参考下
    2015-02-02

最新评论