如何在单个Nuxt.js项目中分离站点端与管理面板端？

Nuxt.js 默认是单应用目录结构，直接在根目录下放两个带独立nuxt.config.js的子应用目录会导致框架无法正确识别入口。下面提供两种适配你需求的可行方案：

方案一：自定义目录映射（适合小型项目，共享公共资源） #

调整目录结构，将站点和管理面板的核心代码放到src子目录下，公共资源保留在根目录：

src/
  site/
    components/
    layouts/
    pages/
    store/
  admin/
    components/
    layouts/
    pages/
    store/
static/
middleware/
utilities/
plugins/
nuxt.site.config.js
nuxt.admin.config.js

配置两个独立的Nuxt配置文件 #

在根目录创建两个配置文件，分别指定各自的源码目录和根目录（用于访问公共资源）：

nuxt.site.config.js（站点端配置）

export default {
  srcDir: 'src/site/', // 指定站点源码目录
  rootDir: '../', // 指向根目录，确保能访问static、plugins等公共资源
  router: {
    base: '/' // 站点路由根路径
  },
  // 按需引入公共资源，比如全局插件
  plugins: [
    '../../plugins/global-plugin.js'
  ]
}

nuxt.admin.config.js（管理面板配置）

export default {
  srcDir: 'src/admin/', // 指定管理面板源码目录
  rootDir: '../',
  router: {
    base: '/admin' // 管理面板路由根路径，避免与站点路由冲突
  },
  plugins: [
    '../../plugins/global-plugin.js'
  ]
}

添加启动/构建脚本 #

在根目录package.json中添加脚本，分别启动两个应用：

{
  "scripts": {
    "dev:site": "nuxt -c nuxt.site.config.js",
    "dev:admin": "nuxt -c nuxt.admin.config.js",
    "build:site": "nuxt build -c nuxt.site.config.js",
    "build:admin": "nuxt build -c nuxt.admin.config.js"
  }
}

方案二：Monorepo结构（适合需要隔离依赖的场景） #

如果后期需要将站点和管理面板分开部署或维护独立依赖，可以用pnpm/yarn workspaces实现Monorepo：

目录结构 #

packages/
  site/
    components/
    layouts/
    pages/
    store/
    nuxt.config.js
    package.json
  admin/
    components/
    layouts/
    pages/
    store/
    nuxt.config.js
    package.json
shared/
  static/
  middleware/
  utilities/
  plugins/
package.json
pnpm-workspace.yaml

配置Monorepo #

在根目录创建pnpm-workspace.yaml（用pnpm的情况）：

packages:
  - 'packages/*'
  - 'shared/*'

子应用配置 #

在站点和管理面板的nuxt.config.js中，通过相对路径引入共享资源：

// packages/site/nuxt.config.js
export default {
  plugins: [
    '../../shared/plugins/global.js'
  ],
  css: [
    '../../shared/css/global.css'
  ]
}

独立管理依赖 #

每个子应用的package.json可以单独安装依赖，公共依赖可以放在根目录package.json中。

注意事项 #

• 路由路径：务必给管理面板设置独立的router.base（比如/admin），避免与站点路由冲突。
• 资源引用：公共资源的路径要确保正确，可通过Nuxt的alias配置简化路径（比如在配置中添加alias: { '@shared': '../../shared' }）。
• 存储：两个应用的Vuex Store是完全独立的，符合你拆分的需求。

内容的提问来源于stack exchange，提问作者Nepster