我有2个Vue应用程序,他们都需要使用一些共同的页面和资产(scss文件,图标等)。它们需要共享的页面是可以访问vuex存储和异步调用的完整页面。我认为要做的是创建一个单独的vue应用程序(使用cli),并将两个应用程序都放在其中,并拥有一个共享文件夹:
vue-project - src - app1 - app2 - shared
但我有个问题:如何单独构建/运行每个应用程序?
ppcbkaq51#
2022年更新
我下面提供的解决方案是有效的,但它很难管理和添加新项目是非常复杂的。现在有很多monorepo工具可以更好地管理这些类型的项目:
原件
这就是我最后做的
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") ...
"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应用程序运行和共享组件,商店模块和页面。
aiazj4mn2#
这里有一个文件级/源代码控制解决方案,允许你同步两个项目中共享组件的副本。如果你使用Git,看看shared submodules。这里有很大的可能性成为一场噩梦。你已经描述得很好了,我想你已经偷偷地意识到了。(跨项目可重用)不应该依赖于vuex存储,这是特定于应用程序的。我会考虑将存储调用放在特定于项目的 Package 器组件中,然后将它们作为 prop 传递给共享组件。根据我的观点,除了 prop 和事件之外,可重用组件不应该与它们的环境有任何交互。
ax6ht2ek3#
如果您正在使用Vite(现在由www.example.com推荐vuejs.org),那么很容易安排这个,而不必学习上面讨论的新的monorepo工具。
3条答案
按热度按时间ppcbkaq51#
2022年更新
我下面提供的解决方案是有效的,但它很难管理和添加新项目是非常复杂的。
现在有很多monorepo工具可以更好地管理这些类型的项目:
这些只是几个选项,但还有更多选项
原件
这就是我最后做的
vue-project
下,因此它们是共享的基本上就是这样,我现在有两个独立的vue应用程序运行和共享组件,商店模块和页面。
aiazj4mn2#
这里有一个文件级/源代码控制解决方案,允许你同步两个项目中共享组件的副本。如果你使用Git,看看shared submodules。
这里有很大的可能性成为一场噩梦。你已经描述得很好了,我想你已经偷偷地意识到了。(跨项目可重用)不应该依赖于vuex存储,这是特定于应用程序的。我会考虑将存储调用放在特定于项目的 Package 器组件中,然后将它们作为 prop 传递给共享组件。根据我的观点,除了 prop 和事件之外,可重用组件不应该与它们的环境有任何交互。
ax6ht2ek3#
如果您正在使用Vite(现在由www.example.com推荐vuejs.org),那么很容易安排这个,而不必学习上面讨论的新的monorepo工具。