Nginx部署Vue二级目录500错误的解决方案
作者：路明子正
这段描述主要讲解了在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;
}
location ~ /.ht {
deny all;
}
}直接页面刷且不出500错误，那只需要在 location / 中添加 try_files $uri $uri/ /index.html; 即可。
二、还有一种情况就是有具体的、特殊的要求
这种情况是用于特殊的环境，例如给政.府、企事业、电信行业等单部署相关项目时就会有类似的要求。
给你分配一个二级域名，或者给你一个二级目标。
如：www.xxxxxx.com/yy/ 为你的项目根目录，那这种情况，往往会很麻烦，需要改动的东西也很多，除了生产环境、测试环境的配置的变化，还有代码级的更改，Vue需要启用“history"模式的 router ，另外还需要在router 里添加二级码为 根访问路径
这里需要注意
静太资源也需要做配置，一般都是在router.js 里添加二级目录
export default new Router({
mode: 'history',
base: '/yy',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})静态资源、公共资源访问配置：
module.exports = {
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;
}
}好了，这样配置(try_files $uri $uri/ /yy/index.html;)好后就可以解决刷新500错误的问题了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。