Question

我想用两个单独的应用程序创建一个网站，这些应用程序共享一些组件并存储。

index是我要使用nuxt.js进行SSR的公共应用程序。

admin应该是不需要SSR的经典SPA。

我的第一个想法是创建一个多页面的vue应用程序，如https://cli.vuejs.org/config/#pages的vue-cli文档中所述

但是我不确定此功能是否满足我的需求，以及是否可以/建议在裸露的vue.js应用程序旁边安装nuxt.js应用程序，因为nuxt.js具有不同的项目结构。

有什么方法可以配置nuxt.js，使其适合vue的默认项目结构，还是可以配置vue以使用nuxt.js文件夹结构？

Answer 1

使用（某些）共享的源文件（components / store / mixins / etc）创建多个Vue应用程序

只需在您想使用的任何地方导入相应的资源即可轻松地在多个Vue-App之间共享资源，例如：

// in /components/MyComponent.vue
<template>
  <div>I'm a shared component</div>
<template>

// in /user-app/entry.js
import MyComponent from '../components/MyComponent';

Vue.component('MyComponent', MyComponent);
new Vue({...})

// in /admin-app/entry.js
import MyComponent from '../components/MyComponent';

Vue.component('MyComponent', MyComponent);
new Vue({...})

有点复杂的地方

要实际创建单独的应用程序，您将必须使用一些内置过程。到目前为止，用于构建Vue应用程序（以及VueCLI和Nuxt使用的工具）的最常用工具是WebPack。

要使用WebPack创建多个应用，您需要执行以下两项操作之一：

分别单独使用VueCLI和Nuxt的集成构建过程。即可使用。
创建您自己的WebPack配置以及WebPack配置中每个应用程序的 EntryPoint 。 注意：：如果您真的想使用Nuxt，那么对Nuxt使用自己的构建过程并非易事，我建议您反对使用它。而是使用两个单独的构建过程来运行。

WebPack配置本身是一个JavaScript对象。声明您的EntryPoints的相关键明智地称为 entry 。在这里，您可以指定EntryPoint的名称和相应的 path （条目文件的路径）。

VueCLI的“页面”功能在后台使用了此功能。但是，我认为非常值得自己学习如何使用WebPack。它并不是那么复杂，它将极大地使您的大部分或所有JavaScript项目受益。

基本示例配置如下：

// in webpack.config.js
module.exports = {
  mode: 'development',

  entry: {
    admin: path.resolve(__dirname, './admin-app.js'),
    user path.resolve(__dirname, './user-app.js'),
  },

  // other config
}

WebPack的文档非常丰富：https://webpack.js.org/concepts/

如何让Nuxt.js和裸Vue.js项目共享组件

1 个答案:

使用（某些）共享的源文件（components / store / mixins / etc）创建多个Vue应用程序

有点复杂的地方