Vue.js 配置 nuxt.js 在 Web 服务器的子目录中工作

在本文中，我们将介绍如何配置 nuxt.js 应用程序在 Web 服务器的子目录中工作。nuxt.js 是一个基于 Vue.js 的通用应用框架，它提供了开箱即用的服务器渲染、路由、代码拆分等特性，使得构建高性能的单页应用(SPA)变得更加容易。

阅读更多：Vue.js 教程

1. 设置 nuxt.js 路由的根路径

要配置 nuxt.js 应用程序在 Web 服务器的子目录中工作，首先需要设置应用程序的根路径。在 nuxt.js 的配置文件 nuxt.config.js 中，我们可以通过设置 router.base 来指定根路径。假设我们的应用程序要工作在 www.example.com/subdir 这个子目录下，我们需要将 router.base 设置为 /subdir/，如下所示：

module.exports = {
  router: {
    base: '/subdir/'
  }
}

配置好后，nuxt.js 应用程序将会自动加上这个根路径来构建路由。

2. 配置 Web 服务器

接下来，我们需要配置 Web 服务器来支持子目录的部署。以常见的 Nginx 服务器为例，我们可以通过配置 location 块来实现。在 Nginx 的配置文件中，添加以下配置：

location /subdir {
  alias /path/to/your/nuxt/app;
  try_files  $uri$ uri/ @subdir;
}

location @subdir {
  rewrite ^/subdir/(.*)$ /subdir/index.html last;
}

将 /path/to/your/nuxt/app 替换为你的 nuxt.js 应用程序的实际路径。配置含义如下：
– location /subdir 指定匹配到 /subdir 的请求。
– alias /path/to/your/nuxt/app 将请求映射到 nuxt.js 应用程序所在的路径。

配置好后，重新加载 Nginx 服务器配置。

3. 修改 Nuxt.js 的路由链接

由于我们将 nuxt.js 应用程序部署在子目录中，而默认情况下 nuxt.js 的路由链接是不包含子目录的。因此，在我们使用路由链接时，需要手动添加子目录的路径。为了方便起见，我们可以在 Vue.js 组件中定义一个计算属性来自动添加子目录路径。

export default {
  computed: {
    base() {
      if (process.browser) {
        return '/subdir'
      } else {
        return ''
      }
    }
  }
}

在需要使用路由链接的地方，使用 this.base 来获取添加了子目录路径的链接。例如，我们要跳转到 /subdir/about 这个页面，可以使用 <nuxt-link :to="${base}/about">About</nuxt-link>。