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打印请求头日志方法,感兴趣的可以了解一下
2023-11-11
Nginx进阶实用配置(压缩、代理、限流、请求合并)
这篇文章主要介绍了Nginx进阶实用配置,包括压缩、代理、限流、请求合并,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2026-04-04
nginx的zabbix 5.0安装部署的方法步骤
之前大家可能经常会基于apache去部署zabbix，但是这样会偶尔遇到一些问题，今天小编就带大家操作一下基于nginx的zabbix5.0的部署。感兴趣的可以了解一下
2021-07-07
Nginx 中文域名配置详解及实现
这篇文章主要介绍了Nginx中文域名配置详解及实现的相关资料,Nginx虚拟主机上绑定一个带中文域名但是不能跳转，这里给大家说下如何实现，需要的朋友可以参考下
2016-12-12
Nginx中多种负载均衡策略配置的实战指南
在当今高并发、大流量的互联网应用中,单台服务器往往难以承受巨大的访问压力,负载均衡作为解决这一问题的关键技术,能够将请求分发到多台服务器上,本文将深入探讨Nginx负载均衡的各种策略和配置方法,大家可以根据需要进行选择
2025-10-10
Nginx隐藏式跳转（浏览器URL跳转后保持不变）
这篇文章主要介绍了Nginx隐藏式跳转（浏览器URL跳转后保持不变）,需要的朋友可以参考下
2022-04-04
Nginx域名转发使用场景代码实例
这篇文章主要介绍了Nginx域名转发使用场景代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
Ubuntu安装Nginx全过程(在线安装&源码编译安装)
介绍了在Ubuntu 20.04上安装Nginx的两种方式：apt安装和源码编译安装,apt安装简单,但模块有限；源码编译安装可以自定义模块,更灵活
2025-03-03
如何用nginx配置wordpress的方法示例
这篇文章主要介绍了如何用nginx配置wordpress的方法示例，详细的介绍了配置步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
使Nginx服务器支持中文URL的相关配置详解
这篇文章主要介绍了使Nginx服务器支持中文URL的相关配置方法,搜索引擎方面Google目前对中文URL的支持度也很好,需要的朋友可以参考下
2016-01-01