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存储。我将看一下将商店调用放在特定于项目的包装器组件中，然后将它们作为道具传递给共享组件。据我说，可重复使用的组件除了道具和事件外，不应与其环境发生任何交互。

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

2 个答案: