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反向代理proxy_cache_path directive is not allowed错误解决方法
这篇文章主要介绍了Nginx反向代理proxy_cache_path directive is not allowed错误解决方法,需要的朋友可以参考下
2015-04-04
Nginx服务安装及软件升级
这篇文章主要为大家介绍了Nginx服务的安装以及软件升级的步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步
2022-03-03
详解 Nginx代理功能与负载均衡
本篇文章主要介绍了详解 Nginx代理功能与负载均衡，先描述一些关于代理功能的配置，再说明负载均衡详细，有兴趣的可以了解一下。
2017-02-02
使用nginx配置基于域名的虚拟主机实现
这篇文章主要介绍了nginx配置基于域名的虚拟主机实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
简单快速搭建Nginx文件服务器
这篇文章主要为大家介绍了简单快速搭建Nginx文件服务器方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
加速nginx性能: 开启gzip和缓存
nginx 是一个高性能的 Web 服务器，之前也写过一些关于 nginx 的文章。为了提高博客的响应速度，可以从设置 nginx 的 gzip 和缓存这2方面入手。为字体开启 gzip 和缓存能大大减少带宽的消耗
2017-03-03
nginx设置超时时间的问题及解决方案
程序在处理大量数据,接口超过1分钟（默认的）未返回数据,导致等待超时,出现这种情况,我们可以先优化程序,缩短执行时间,可以调大nginx超时限制的参数,使程序可以正常执行,本文介绍nginx设置超时时间及504 Gateway Time-out的问题解决方案,一起看看吧
2024-02-02
Nginx upstream的5种权重分配方式分享
Nginx upstream的5种权重分配方式分享，需要的朋友可以参考下
2012-09-09
解决nginx访问页面中文乱码的问题
这篇文章主要为大家介绍了nginx访问页面中文乱码解决方案,文中有相关的代码示例供大家参考,有需要的朋友可以借鉴参考下,希望能够有所帮助
2023-09-09
nginx限流方案的实现(三种方式)
一般对外暴露的系统,在促销或者黑客攻击时会涌来大量的请求,为了保护系统不被瞬间到来的高并发流量给打垮, 就需要限流，这篇文章主要介绍了nginx限流方案的实现，非常具有实用价值，需要的朋友可以参考下
2018-05-05