Nginx部署Vue二級目錄500錯誤的解決方案

更新時間：2026年05月24日 10:37:55 作者：路明子正

這段描述主要講解了在Nginx環(huán)境下部署Vue項目的方法,特別針對二級域名和路徑配置進行了詳細說明,提供了解決500錯誤的有效配置

一、用Vue開發(fā)項目就少了部署到在Nginx的環(huán)境下

如果沒有特殊的要求，域名或者主機名、IP都是直接的地址，沒有子目錄或者不是子域的話，那部署一般都很簡單，基本下就按照一種根目錄的轉發(fā)就可以了。

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; 即可。

二、還有一種情況就是有具體的、特殊的要求

這種情況是用于特殊的環(huán)境，例如給政.府、企事業(yè)、電信行業(yè)等單部署相關項目時就會有類似的要求。

給你分配一個二級域名，或者給你一個二級目標。

如：www.xxxxxx.com/yy/ 為你的項目根目錄，那這種情況，往往會很麻煩，需要改動的東西也很多，除了生產(chǎn)環(huán)境、測試環(huán)境的配置的變化，還有代碼級的更改，Vue需要啟用“history"模式的 router ，另外還需要在router 里添加二級碼為根訪問路徑

這里需要注意

靜太資源也需要做配置，一般都是在router.js 里添加二級目錄

export default new Router({
  mode: 'history',
  base: '/yy',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

靜態(tài)資源、公共資源訪問配置：

module.exports = {
  publicPath: '/yy/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
   ......
}

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

但現(xiàn)在把這個打包并部署到Nginx上后，一刷新就會出現(xiàn)500錯誤，而且用原來的方式(try_files $uri $uri/ /index.html;)配置不起作用,現(xiàn)在只能配置成二級目錄的路徑才可以。

配置如下：

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錯誤的問題了。