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

Question

我想创建一个包含两个独立应用程序的网站，它们共享一些组件和存储。

index 是我想使用 nuxt.js 拥有 SSR 的公共应用程序。

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

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

但是我不确定此功能是否符合我的需求，以及是否可以/建议将 nuxt.js 应用程序与裸 vue.js 应用程序一起使用，因为 nuxt.js 具有不同的项目结构。

有没有办法配置 nuxt.js 使其适合 vue 的默认项目结构或配置 vue 使用 nuxt.js 文件夹结构？

Answer 1

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

很容易在多个 Vue-Apps 之间共享资源，只需在您想使用它的任何地方导入相应的资源，例如：

// 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 创建多个应用程序，您需要执行以下两项操作之一：

1. 只需分别使用 VueCLI 和 Nuxt 的集成构建过程。它开箱即用。

2. 创建您自己的 WebPack 配置和 WebPack 配置中每个应用程序的 EntryPoint。 注意： 使用您自己的 Nuxt 构建过程并非易事，如果您真的想使用 Nuxt，我建议您不要这样做。而是使用两个单独的构建过程运行。

WebPack 配置本身是一个 JavaScript 对象。声明EntryPoints 的相关键明智地称为entry。在这里，您指定 EntryPoint 的 name 和相应的 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/