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