如何解決vuejs應用在nginx非根目錄下部署時訪問404的問題

當我們使用Vue.js開發應用時，我們會發現將應用部署在nginx的非根目錄下時，訪問該應用時會出現404錯誤。這是因為Vue在刷新頁面或者直接訪問非根目錄的路由時，會認為服務器上並沒有相應的資源。因此，本文將從多個方面詳細闡述如何解決該問題。

一、更改Vue Router的base配置

默認情況下，Vue Router會將base配置設置為’/’，所以當我們通過非根目錄進行部署時，需要將base手動更改為部署的子目錄。在router/index.js文件中，我們可以添加如下代碼：

const router = new VueRouter({
  mode: 'history',
  base: '/your_sub_directory/', //此處更改為你的子目錄名稱
  routes
})

其中，base配置項需要設置為你應用的非根目錄部分。並且請確保在以history模式編寫Vue Router時，也要將nginx的rewrite配置相應地配置為所有的請求都被重定向到index.html。

二、更改nginx的配置文件

由於nginx默認部署在根目錄下，當我們將應用部署在非根目錄下時，需要更改nginx的配置文件。我們需要添加以下代碼到設置中：

location /your_sub_directory/ {
  alias /usr/share/nginx/html/sub_directory/;
  try_files $uri $uri/ /your_sub_directory/index.html;
}

其中，location部分需要設置為你的應用的子目錄名稱，alias需要設置為你的應用的實際路徑，try_files需要添加你的應用的根目錄的index.html。

三、使用Vue Cli3的publicPath配置

如果你使用的是Vue Cli3來創建你的Vue.js應用，並且需要部署在非根目錄下，則可以通過publicPath配置項來更改應用的部署路徑。在vue.config.js文件中，添加如下代碼：

module.exports = {
  publicPath: '/your_sub_directory/'
}

然後，重新打包你的應用並部署即可。

四、總結

通過以上的方法，我們可以解決Vue.js應用在nginx非根目錄下部署時出現404的問題。需要注意的是，不同的情況下，需要選擇相應的解決方案。如果你是使用Vue Cli3來創建你的Vue.js應用，則可以使用publicPath配置。如果你是手動部署Vue.js應用，則需要更改Vue Router的base配置或者更改nginx的配置文件。希望本文能夠對你有所幫助。