nuxtjs一个项目部署多个网站

1. 方案一 ：首页分目录

I had this requirement too and came up with this solution:

Everything is shared as one Nuxt 3 app with a single nuxt.config.ts. The only difference is that each app has it's own sub-directory within /pages.

Here's how I set it up:

• Create a pages structure like this:

/pages
--/website1
--/website2
--/website3

• Define an env variable like WEBSITE_ID (e.g. within your project's .env)

WEBSITE_ID="website1"

• Inside of nuxt.config.ts add this configuration:

export default defineNuxtConfig({  //...
  dir: {    pages: `pages/${process.env.WEBSITE_ID}`
  },  //...})

• When it's time to deploy your apps, inject the corresponding WEBSITE_ID env variable for each at build time.

• While in development, simply edit the WEBSITE_ID within the .env to switch which website you're working on.

This setup makes it so that for example, when website1 is active, pages/website1 is treated as the /pages directory... so pages/website1/index.vue would be resolved when requesting /.

方案二： 利用nuxtjs3的新特性 layers，能更好的控制项目大小

f you're on Nuxt 3, you're probably after Layers here: https://nuxt.com/docs/getting-started/layers

A base app can be extended, thus sharing components etc with other apps.