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

Question

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

index 是 public 应用程序，我想在其中使用 nuxt.js 来获得 SSR。

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

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

的 vue-cli 文档中所述

但是我不确定这个功能是否满足我的需要，以及是否 possible/advisable 有一个 nuxt.js 应用程序和一个裸露的 vue.js 应用程序，因为 nuxt.js 有不同的项目结构。

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

Answer 1

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

只需在您想使用的任何地方导入相应的资源，就可以轻松地在多个 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 的 name 和相应的 path（入口文件的路径）。

VueCLI 的 'Pages' 特性在底层使用了它。但是，我相信自己学习如何使用 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 项目共享组件

How to have a Nuxt.js and a bare Vue.js project share components

vue.js

nuxt.js

vue-cli-3

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

哪里有点复杂