vue3配置caddy作为静态服务器，在浏览器地址栏刷新出现404
vue3配置caddy作为静态服务器，在浏览器地址栏刷新出现404
- 1 情况描述
- 2 原因
- 3 配置
- 3.1 caddy配置
- 3.2 打包配置
1 情况描述
在vue打包之后，形成dist文件，采用caddy作为静态资源服务器。在浏览器中输入域名时可以访问网站，但是，进过路由导航栏内部的跳转之后，想要在浏览器中刷新资源，发现浏览器出现404。
2 原因
这个主要是vue的历史记录模式导致的。
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。
这是因为单页的客户端应用中，所有资源请求都是通过打包后的index.html作为入口进行处理的。这时如果只是通过配置的根目录进行访问，那肯定找不到。
这时应该将没有找到的路由全部指向index.html中。
这里需要配置打包的路径和caddy的请求处理。
3 配置
3.1 caddy配置
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
3.2 打包配置
一定要配置base 为 / 。使得所有的静态资源请求均是从该目录下出发寻找。
import {fileURLToPath, URL} from 'node:url'
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import {AntDesignVueResolver} from "unplugin-vue-components/resolvers";
export default defineConfig({
plugins: [
vue(),
],
base: '/', //这里一定要配置为 /
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
minify: 'terser', // 使用 Terser 进行代码压缩
cssCodeSplit: true, // 启用 CSS 拆分
sourcemap: false, // 关闭 sourcemap 生成
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
},
},
}
})
