Nginx部署Vue⼆级⽬录500错误
⼀、⽤Vue开发项⽬就少了部署到在Nginx的环境下,如果没有特殊的要求,域名或者主机名、IP都是直接的地址,没有⼦⽬录或者不是⼦域的话,那部署⼀般都很简单,基本下就按照⼀种根⽬录的转发就可以了。
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;nginx部署前端项目
}
location ~ /.ht {
deny all;
}
}
直接页⾯刷且不出500错误,那只需要在 location / 中添加 try_files $uri $uri/ /index.html; 即可。
⼆、还有⼀种情况就是有具体的、特殊的要求,这种情况是⽤于特殊的环境,例如给政府、企事业、电信⾏业等单部署相关项⽬时就会有类似的要求。给你分配⼀个⼆级域名,或者给你⼀个⼆级⽬标。如:
这⾥需要注意的时,静太资源也需要做配置,⼀般都是在router.js ⾥添加⼆级⽬录
export default new Router({
mode: 'history',
base: '/yy',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
静态资源、公共资源访问配置:
publicPath: '/yy/',
outputDir: 'dist',
assetsDir: 'static',
lintOnSave: false,
productionSourceMap: false,
......
}
好了,到⽬前为⽌,Vue的配置基本OK了。但现在把这个打包并部署到Nginx上后,⼀刷新就会出现 500错误,⽽且⽤原来的⽅式(try_files $uri $uri/ /index.html;)配置不起作⽤,现在只能配置成⼆级⽬录的路径才可以。配置如下:
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;
}
}
好了,这样配置(t ry_files $uri $uri/ /yy/index.html;)好后就可以解决刷新500错误的问题了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论