vue3配置caddy作为静态服务器,在浏览器地址栏刷新出现404

vue3配置caddy作为静态服务器,在浏览器地址栏刷新出现404

  • [1 情况描述](#1 情况描述)
  • [2 原因](#2 原因)
  • [3 配置](#3 配置)

1 情况描述

在vue打包之后,形成dist文件,采用caddy作为静态资源服务器。在浏览器中输入域名时可以访问网站,但是,进过路由导航栏内部的跳转之后,想要在浏览器中刷新资源,发现浏览器出现404。

2 原因

这个主要是vue的历史记录模式导致的。

由于我们的应用是一个单页的客户端应用,如果没有适当的服务器配置,用户在浏览器中直接访问 https://example.com/user/id,就会得到一个 404 错误。

这是因为单页的客户端应用中,所有资源请求都是通过打包后的index.html作为入口进行处理的。这时如果只是通过配置的根目录进行访问,那肯定找不到。

这时应该将没有找到的路由全部指向index.html中。

3 配置

handle 的使用,可以有效的隔离不同的请求,防止后端的请求被错误的判断为前端的请求。

复制代码
example.com {

	handle /api/* {
		reverse proxy localhost:9911
	}
	handle {
		root * /home/www/dist
		encode zstd gzip
		file_server
		try_files {path} /
	}
}

https://router.vuejs.org/zh/guide/essentials/history-mode.html#Caddy-v2

相关推荐
一直在学习的小白~15 分钟前
node_modules 明明写进 .gitignore,却还是被 push/commit 的情况
前端·javascript·vue.js
大锦终35 分钟前
【Linux】进程间通信
linux·运维·服务器·c++
nightunderblackcat1 小时前
新手向:从零理解LTP中文文本处理
前端·javascript·easyui
望获linux1 小时前
【实时Linux实战系列】规避缺页中断:mlock/hugetlb 与页面预热
java·linux·服务器·数据库·chrome·算法
User:你的影子1 小时前
WPF ItemsControl 绑定
开发语言·前端·javascript
小程序设计1 小时前
【springboot+vue】高校迎新平台管理系统(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
会有钱的-_-1 小时前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
西瓜君的代码2 小时前
rabbitmq的安装
linux·运维·服务器
知识分享小能手2 小时前
React学习教程,从入门到精通,React 构造函数(Constructor)完整语法知识点与案例详解(16)
前端·javascript·学习·react.js·架构·前端框架·vue
召摇2 小时前
NodeBB 深度解析:现代论坛系统的架构设计与实践指南
前端·javascript