当前位置：首页 > server > anz > 详细页面

Nginx部署Vue二级目录500错误的解决方案

时间：2026-05-26来源：www.dnxitongcheng.com作者：电脑系统城

一、用Vue开发项目就少了部署到在Nginx的环境下

如果没有特殊的要求，域名或者主机名、IP都是直接的地址，没有子目录或者不是子域的话，那部署一般都很简单，基本下就按照一种根目录的转发就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 server {
listen 80;
location / {
root /opt/nginx/html/myadd;
#防刷新500错误
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /app/nginx/html;
}

location ~ /.ht {
deny all;
}
}

直接页面刷且不出500错误，那只需要在 location / 中添加 try_files $uri $uri/ /index.html; 即可。

二、还有一种情况就是有具体的、特殊的要求

这种情况是用于特殊的环境，例如给政.府、企事业、电信行业等单部署相关项目时就会有类似的要求。

给你分配一个二级域名，或者给你一个二级目标。

如：www.xxxxxx.com/yy/ 为你的项目根目录，那这种情况，往往会很麻烦，需要改动的东西也很多，除了生产环境、测试环境的配置的变化，还有代码级的更改，Vue需要启用“history"模式的 router ，另外还需要在router 里添加二级码为根访问路径

这里需要注意

静太资源也需要做配置，一般都是在router.js 里添加二级目录

1
2
3
4
5
6 export default new Router({
mode: 'history',
base: '/yy',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})

静态资源、公共资源访问配置：

1
2
3
4
5
6
7
8 module.exports = {
publicPath: '/yy/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
......
}

好了，到目前为止，Vue的配置基本OK了

但现在把这个打包并部署到Nginx上后，一刷新就会出现500错误，而且用原来的方式(try_files $uri $uri/ /index.html;)配置不起作用,现在只能配置成二级目录的路径才可以。

配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 server {
listen 80;
location / {
root /opt/nginx/html/myadd;
#二级目录防刷新500错误
try_files $uri $uri/ /yy/index.html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /app/nginx/html;
}
location ~ /.ht {
deny all;
}
}