我有两个Vue应用程序,它们都需要使用一些常见的页面和资源(scss文件、图标等).
他们需要共享的页面是可以访问vuex存储和异步调用的完整页面.
我想做的是创建一个vue应用程序(使用cli),将两个应用程序都放在其中,并拥有一个共享文件夹:
vue-project
- src
- app1
- app2
- shared
但我有一个问题:如何分别构建/运行每个应用程序?
我有两个Vue应用程序,它们都需要使用一些常见的页面和资源(scss文件、图标等).
他们需要共享的页面是可以访问vuex存储和异步调用的完整页面.
我想做的是创建一个vue应用程序(使用cli),将两个应用程序都放在其中,并拥有一个共享文件夹:
vue-project
- src
- app1
- app2
- shared
但我有一个问题:如何分别构建/运行每个应用程序?
100
我下面提供的解决方案是有效的,但很难管理,而且添加新项目非常复杂.
如今,有许多monorepo工具能够更好地管理这些类型的项目:
这些只是几个选项,但还有更多选项
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应用程序运行并共享组件、存储模块和页面.