我有两个Vue应用程序,它们都需要使用一些常见的页面和资源(scss文件、图标等).

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

我想做的是创建一个vue应用程序(使用cli),将两个应用程序都放在其中,并拥有一个共享文件夹:

vue-project
   - src
     - app1
     - app2
     - shared

但我有一个问题:如何分别构建/运行每个应用程序?

推荐答案

100

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

如今,有许多monorepo工具能够更好地管理这些类型的项目:

  1. nx
  2. yarn workspaces

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

100

这就是我最后做的:

  • 我创造了这个 struct

     vue-project
         - node_modules
         - src
           - app1
           - app2
           - shared
    
  • 所有 node 模块都在vue-project以下,因此它们是共享的

  • 不是强制性的,但我为不同的项目定义了别名:

     ...
     "@app1": path.resolve(__dirname, "src/app1"),
     "@app2": path.resolve(__dirname, "src/app2"),
     "@shared": path.resolve(__dirname, "src/shared/components")
     ...
    
  • 需要注意的是,在创建别名时,应该添加"@"符号,否则可能会得到意外的结果.对我来说,在我添加它之前,它是在从app2加载资源,尽管我使用了app1的别名

  • 我已经在软件包中创建了这些脚本.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"
    

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

Vue.js相关问答推荐

Vue3:如何在功能组件中重用插槽vnode

过渡如何在 Vue JS 3 中的图像上工作?

在移动版本中使用标准的 v-data-table

在 onMounted 之前渲染的 Vue 模板

为什么我在 Vue npm run serve 的 localhost 中得到无法获取

有没有办法初始化一个保留初始 HTML 的 Vue 对象

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

在 vue 组件中检索配置和环境变量

单击复选框后,V-model 未更新

Angular 5 中的 功能

如何从 bootstrap-vue 模态监听事件?

如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?

v-for 如何在继续之前判断未定义的列表

安装后运行computed计算函数

Vue3在按钮单击时以编程方式创建组件实例

vuejs 配置:使用全局变量?

用于 nuxt.js 构建的自定义 index.html

vuejs 中缺少 webpack 配置

Vue.js 中的条件 依赖于props值?

如何在 vue3 中的setup方法中发出事件?