Apache2 中的 Nuxt 3 生产，带有子目录

Question

我有一台运行着 Node/NodeJS 和 P2M 的 Ubuntu 18.04 服务器。我想将 Nuxt 3 项目部署到子目录 /app/ 中。在我的 /var/www/html 上有一个其他项目（客户端）。

我所做的，运行

nuxt build

并在我的

nuxt.config.js

中添加以下属性：

... other config
server: {
  port: 8080,
},
router: {
  base: "/app/",
},
app: {
  base: "/app/",
  head: {
    meta: [],
    link: [],
  },
},
vite: {
  base: "/app/",
  plugins: [svgLoader(), dynamicImport()],
},
....

我把

.output

中的所有内容都放入

/var/www/html/app

在这个文件夹中，我运行以下命令

pm2 start ecosystem.config.js -- --port 8080

在我的 apache 配置中，我有以下内容：

ProxyPass /app/ http://localhost:8080/
ProxyPassReverse /app/ http://localhost:8080/

ecosystem.config.js

看起来像这样：

module.exports = {
  apps: [
    {
      name: 'app',
      port: '8080',
      cwd: '/var/www/html/app',
      exec_mode: 'cluster',
      instances: 'max',
      script: './server/index.mjs'
    }
  ]
}

在我的网站上

https://example.net/app

我看到了该应用程序，但它正在尝试获取示例

_nuxt

中的

https://example.net/_nuxt/entry.06c30429.js

文件。我不想将其放在根文件夹中，而是放在

https://example.net/app/_nuxt/entry.06c30429.js

中，这样我就可以拥有多个项目。现在我只是将 _nuxt 文件夹放入

/var/www/html

中，但这仅限于 1 个 SSR 项目。不太理想。我尝试了很多事情，包括在

nuxt.config.js

中指定

buildDir: "app",

路由器也无法正常工作。直接导航到

https://example.net/app

我看到了该应用程序。但在页面刷新时，它会导航到

https://example.net/

。上述问题对我来说更重要的是要解决。

我不知道如何解决它，因为我尝试了很多不同的方法。

如果我有这个

nuxt.config.js

app: {
  baseURL: "/app/",
  head: {
    meta: [],
    link: [],
  },
},

我收到错误

404 Cannot find any path matching /.

如果我奇怪地前往 /app/app ，我会看到该页面，但收集 _nuxt 文件示例时出错

https://example.net/app/_nuxt/vue.f36acd1f.a74ff25b.js

。这些确实存在。在 Apache 配置中添加它也不起作用。一切都很奇怪。

ProxyPass /app/ http://localhost:8080/
ProxyPassReverse /app/ http://localhost:8080/

<Location "/app/_nuxt/">
    ProxyPass !
</Location>

Alias /app/_nuxt/ /var/www/html/app/_nuxt
<Directory /var/www/html/app/_nuxt>
    Options -Indexes
    AllowOverride None  
    Order allow,deny  
    Allow from all
</Directory>

PM2 日志

项目：Nuxt 3.8.2 & Vue 3.3.8

Answer 1

要让 Nuxt 与具有包含子目录的 URL 的 Apache 反向代理良好配合，您需要做两件事：

1. app.baseURL

   中的

   nuxt.config.js

   项目设置为您的子目录，例如

   /app

   ：

    export default defineNuxtConfig({
       //...
       app: {
           baseURL: "/app"
       },
       //...
    )}

2. 您的 Apache 配置中的以下内容：

    ProxyPass /app http://localhost:8080/app
    ProxyPassReverse /app http://localhost:8080/app

注意末尾的“/app”已被添加，并且我将“/app”作为 ProxyPass 和 ProxyPassReverse 的第二个参数，而不是“/app/”。 （我看到一些用户对尾随的

/

有问题）

这样，Nuxt 将在

localhost:8080/app

为应用程序提供服务，而 Apache 将

example.url/app

传递到同一位置。然后，对 Nuxt 资产的请求应显示为发送至

example.url/app/_nuxt/<asset>

并且应正确解决。

我的 标签下也没有特定于 nuxt 的配置（仅与身份验证相关的配置），所以也尝试不使用它。