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搭建RTMP视频点播、直播、HLS服务器，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
Nginx动静分离是旨在将静态页面与动态页面或静态内容接口与动态内容接口分开,本文主要介绍了Nginx实现动静分离的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-03-03
本篇文章主要介绍了详解nginx basic auth配置踩坑记，nginx的basic auth配置由ngx_http_auth_basic_module模块提供，对HTTP Basic Authentication协议进行了支持，感兴趣的小伙伴们可以参考一下2018-07-07
nginx可以使用各平台的默认包来安装，本文是介绍使用源码编译安装与配置，希望对大家熟悉nginx能够有所帮助。2016-06-06
nginx-ingress-controller日志持久化方案的解决
这篇文章主要介绍了nginx-ingress-controller日志持久化方案的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
nginx(engine x) 是一个 高性能 的 HTTP 和 反向代理 服务器、邮件代理服务器以及通用的 TCP/UDP 代理服务器。这篇文章主要介绍了Linux 系统 nginx 服务器安装及负载均衡配置详解,需要的朋友可以参考下2019-07-07
本文主要介绍了nginx实现单主机多域名映射的项目实践,配置不同的子域名映射到不同的内部服务端口,具有一定的参考价值,感兴趣的可以了解一下2025-02-02
一个网站项目,肯定是避免不了404页面的,下面这篇文章主要给大家介绍了关于前端部署项目后nginx转发接口404(页面正常)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
虚拟主机（vhost）技术允许一台物理服务器托管多个独立网站或应用,每个虚拟主机拥有独立的域名、配置文件等,实现资源隔离管理,Nginx服务器通过配置文件实现虚拟主机设置,感兴趣的可以了解一下2024-11-11
proxy_pass参数用于配置反向代理,本文主要介绍了nginx代理参数proxy_pass的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-04-04
最新评论