在Vue项目之间共享资产和组件

Question

我有2个Vue应用程序，他们都需要使用一些常见的页面和资产（scss文件，图标等）。

他们需要共享的页面是可以访问vuex存储和异步调用的完整页面。

我想要做的是创建一个单独的vue应用程序（使用cli）并将两个应用程序放在其中并拥有一个共享文件夹：

vue-project
   - src
     - app1
     - app2
     - shared

但后来我遇到了一个问题：我如何单独构建/运行每个应用程序？

Answer 1

所以这就是我最终做的事情：

• 我已经创建了这个结构

  vue-project
      - node_modules
      - src
        - app1
        - app2
        - shared

• 所有节点模块都在vue-project下，因此它们是共享的
• 不是强制性的，但我为不同的项目定义了别名：

  ...
  "@app1": path.resolve(__dirname, "src/app1"),
  "@app2": path.resolve(__dirname, "src/app2"),
  "@shared": path.resolve(__dirname, "src/shared/components")
  ...

• 需要注意的是，在创建别名时，您应该添加“@”符号，否则可能会出现意外结果。对我来说，在我添加它之前，它正在从app2加载资源，即使我使用了app1的别名
• 我在package.json中创建了这些脚本：

  "serve:app1": "vue-cli-service serve --port 3000 --open  src/app1/main.js",
  "serve:app2": "vue-cli-service serve --port 3001 --open  src/app2/main.js",
  "build:app1": "vue-cli-service build --dest dist/console src/app1/main.js",
  "build:app2": "vue-cli-service build --dest dist/tm src/app2/main.js"

  基本上就是这样，我现在有2个独立的vue应用程序在运行和共享组件，存储模块和页面。

Answer 2

将有一个文件级/源控制解决方案，允许您在两个项目中同步共享组件的副本。如果您正在使用Git，请查看shared submodules。

噩梦在这里有很大的潜力。你已经很好地描述了它，我认为你是秘密意识到的。可重用组件（可跨项目重用）不应依赖于特定于应用程序的vuex存储。我将把商店调用放在一个特定于项目的包装器组件中，然后将它们作为props传递给共享组件。据我所知，除了道具和事件之外，可重复使用的组件不应与其环境进行任何交互。