[系统运维]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错误的问题了。