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

Question

我有 2 个 Vue 应用程序，它们都需要使用一些公共页面和资产（scss 文件、图标等）。

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

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

vue-project
   - src
     - app1
     - app2
     - shared

但后来我遇到了一个问题：我如何 build/run 每个应用程序分开？

Answer 1

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

这里很有可能成为噩梦。你描述得太好了，我想你暗自知道。可重用组件（可跨项目重用）不应依赖于特定于应用程序的 vuex 存储。我会考虑将商店调用放在特定于项目的包装器组件中，然后将它们作为道具传递给共享组件。根据我的说法，除了 props 和 events 之外，可重用组件不应该与它们的环境有任何交互。

Answer 2

更新 2022

我在下面提供的解决方案是有效的，但是很难管理并且添加新项目非常复杂。

今天有许多 monorepo 工具可以更好地管理这些类型的项目：

这些只是几个选项，但还有更多选项

原版POST

这就是我最后做的事情：

我创建了这个结构

 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 应用程序运行并共享组件、商店模块和页面。

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

Sharing assets and components between Vue projects

vue.js

vue-cli-3