Vite 打包常见 404,500 问题
vite 部署在子目录
1. 配置 vite.config.js
js
export default defineConfig({
base: "/你自己的二级名称/",
});2. 修改路由
- 你里面再写路径的话就不用加 activity 了 例如
/找的就是/activity
js
const router = createRouter({
history: createWebHistory("/你自己的二级名称/"),
routes: [
{
path: "/",
component: LayOutPage,
children: [...Router2025],
},
],
});注意
这里的路径必须和 vites 的 base 一致 路径名称必须一致
3. 修改 nginx 配置
bash
location /activity
{
alias /www/wwwroot/xxxxxxxx/activity; # Vue项目构建后的静态文件存放路径
index index.html;
try_files $uri $uri/ @router;
}
location @router
{
rewrite ^.*$ /activity/index.html last;
}4.静态资源
- 静态资源放在
public文件夹下，访问路径为/activity/静态资源名称
html
<!--index.html 写的时候不用加activity-->
<script
type="text/javascript"
src="/static/aliplayercomponents-1.0.5.min.js"
></script>
<!--打包成功以后 他自定给你加-->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/activity/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
type="text/javascript"
src="/activity/static/aliplayercomponents-1.0.5.min.js"
></script>
<title>Vite App</title>
<script
type="module"
crossorigin
src="/activity/assets/index-BEMMi3oO.js"
></script>
<link
rel="stylesheet"
crossorigin
href="/activity/assets/index-CqylYquy.css"
/>
</head>
<body>
<div id="app"></div>
</body>
</html>5. 访问
bash
http://域名/你自己的二级名称/