如何解决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的配置文件。希望本文能够对你有所帮助。