快捷導(dǎo)航

Nginx部署Vue二級(jí)目錄500錯(cuò)誤的解決方案

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

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

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

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

server {
        listen  80;
        location / {
            root   /opt/nginx/html/myadd;
            #防刷新500錯(cuò)誤
            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;
        }
   }

直接頁(yè)面刷且不出500錯(cuò)誤，那只需要在 location / 中添加 try_files $uri $uri/ /index.html; 即可。

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

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

給你分配一個(gè)二級(jí)域名，或者給你一個(gè)二級(jí)目標(biāo)。

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

這里需要注意

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

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)在把這個(gè)打包并部署到Nginx上后，一刷新就會(huì)出現(xiàn)500錯(cuò)誤，而且用原來(lái)的方式(try_files $uri $uri/ /index.html;)配置不起作用,現(xiàn)在只能配置成二級(jí)目錄的路徑才可以。

配置如下：

server {
        listen  80;
        location / {
            root   /opt/nginx/html/myadd;
            #二級(jí)目錄防刷新500錯(cuò)誤
            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錯(cuò)誤的問題了。