vue3路由使用createWebHistory部署访问404问题 vite部署访问404问题
开始
createWebHistory()
这个模式部署Nginx,在部署有遇到很多问题,同样的配置在 不同的vite版本和不同的Nginx版本下有可能会失效,需要多加调整,建议如果不是很在意url样式 可以使用 createWebHashHistory()
模式,这个模式不需要额外对部署的服务器进行配置,所以相对来说简单
Nginx版本是 1.24.0
Vite版本是 5.3.2
createWebHistory() H5路由模式
默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上
例如 http://www.liyangme.top.com/
。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。
例如,应用被部署在 http://www.liyangme.top.com/demo/
,则 base需要配置 为 /demo/
这个问题只有 路由模式为 createWebHistory(H5模式)
才会出现,如果使用的是 #
这样的路由则不会出现
修改vite.config.js
修改 base
为 /demo/
, 具体根据你的应用名称来
修改 router/index.js 路由模式
修改createWebHistory
中的路径,与 vite.config
中的 base
路径一致
如果部署访问 500或者404,将 createWebHistory
中的路径去掉,重新打包测试
const router = createRouter({
history: createWebHistory('/demo/'),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
},
});
export default router;
修改Nginx
配置1
server {
listen 9999;
server_name localhost;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location /demo{
# windows方式
# alias "E:\\apps\\nginx-1.24.0\\nginx-1.24.0\\html\\demo";
# Linux方式
alias "/apps/nginx-1.24.0/nginx-1.24.0/html/demo";
# Linux方式 二
# alias /apps/nginx-1.24.0/nginx-1.24.0/html/demo;
# 解决刷新404问题
try_files $uri $uri/ /demo/index.html;
}
}
配置2
server {
listen 9999;
server_name localhost;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location /demo/ {
alias "/apps/nginx-1.24.0/nginx-1.24.0/html/demo";
# 解决刷新404问题
try_files $uri $uri/ /index.html;
}
}
配置3
server {
listen 9999;
server_name localhost;
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
root /apps/nginx-1.24.0/nginx-1.24.0/html;
index index.html;
location /demo {
try_files $uri $uri/ /index.html =404;
}
}
createWebHashHistory() 哈希模式
修改vite.config.js
修改 base
为 ./
修改 router/index.js 路由模式
修改路由模式为 createWebHashHistory()
const router = createRouter({
history: createWebHashHistory(),
routes: constantRoutes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { top: 0 };
}
},
});
打包之后直接将demo文件夹放在 Nginx/html目录下,直接就可以访问了,例如 http://localhost/demo, nginx会自己解析子路径,不需要配置Nginx
Nginx配置 域名非80端口访问
server {
listen 9999;
server_name localhost;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
root /apps/nginx-1.24.0/nginx-1.24.0/html/demo;
index index.html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
Nginx配置 域名非80端口带子路径访问
server {
listen 9999;
server_name localhost;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location /demo {
root /apps/nginx-1.24.0/nginx-1.24.0/html/demo;
index index.html;
try_files $uri $uri/ /index.html =404;
}
}
Nginx配置 域名非80端口带子路径访问
server {
listen 9999;
server_name localhost;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' '*';
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
location /demo {
root /apps/nginx-1.24.0/nginx-1.24.0/html;
index index.html;
try_files $uri $uri/ /index.html =404;
}
}