如何将整个 Vue 应用程序捆绑为单个 UMD 模块
Lea*_*han 3 javascript module vue.js vuejs2
我想使用 vue-cli-service 将带有样式和所有内容的 vue 应用程序捆绑到单个 UMD javascript 模块中，以便我可以通过我的组件分发服务器将其导入到另一个Vue 应用程序中。我可以使用服务器上的一个组件来完成此操作，但我不知道如何捆绑整个应用程序并将其远程加载到单独的应用程序中。我使用这篇文章作为指南https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
这是我导入它的地方：
{
path: '/games',
component: GamesHome,
children: [
{
path: 'fun',
component: () =>
externalComponent(
'http://localhost:8200/game/Game.cd590421a6d6835e7ae2.umd.min.js'
),
name: 'Fun Game'
}
] }
所以基本上我如何创建一个 Vue 应用程序，然后将其完全与 CSS 捆绑并全部使用 vue-cli-service
这是我从开始使用 VueJS 的第一天起就一直在努力解决的问题。如果客户端 JS 框架不能提供此问题的解决方案，我不会考虑它。
我最近做了一个 PoC，并且能够将 VueJS 应用程序作为另一个 VueJS 应用程序中的模块使用。就我而言，我有一套 VueJs 应用程序，其中每个应用程序都在其自己的专用 docker 容器中运行。这些应用程序具有许多在所有应用程序中通用的功能。因此，我决定将这个通用代码（页面布局、CSS 框架等）移动到一个单独的 VueJS 应用程序中，并将所有现有的 VueJS 应用程序作为该全局应用程序中的模块使用。我将这种基于微应用的架构称为基于微应用的架构，以区别于基于微前端的架构，因为它不使用多个客户端 JS 框架，也不需要另一个框架来实现这一点。这就是我的情况下部署架构的样子（kubernetes如果您不知道，您可以忽略特定的内容）-
回到实现部分，您需要采取逐步的方法将 VueJS 应用程序转换为微应用程序。
- 假设您的项目结构如下所示（它仅显示需要更改的少数文件，而不是所有文件）-
app-1
public
index.html
src
main.js
App.vue
router
index.js
store
index.js
- 将 vuex 状态和路由文件拆分为全局文件和应用程序特定文件 -
app-1
public
index.html
src
main.js
App.vue
router
app1
index.js
index.js
store
app1
index.js
index.js
- 复制该项目（global-app
global-app），app-1从app-1.global-app还从 项目中删除index.html和-App.vueapp-1
- 将变量添加到
ROUTES-的文件中STORE_MODULESindex.htmlglobal-app
<head>
....
....
<script type="text/javascript">
const ROUTES = []
const STORE_MODULES = {}
</script>
</head>
<body>
....
....
<div id="app"></div>
<script type="text/javascript" src="/app1/micro-app.umd.min.js"></script>
<!-- built files will be auto injected -->
</body>
- 更新变量的
router\index.js文件-global-appROUTES
const routes = [
....
....
]
routes.push(...ROUTES)
const router = new VueRouter({
- 更新变量的
store\index.js文件-global-appSTORE_MODULES
export default new Vuex.Store({
....
....
modules: STORE_MODULES
})
- 清除文件内容
app-1\src\main.js并将其替换为以下内容 -
import routes from '@/router/app1'
import app1 from '@/store/app1'
ROUTES.push(...routes)
STORE_MODULES['app1'] = app1
- 在-文件块下定义
build-app命令scriptspackage.jsonapp-1
....
"scripts": {
"build-app": "vue-cli-service build --target lib --formats umd-min --no-clean --name micro-app src/main.js"
},
....
- 现在在其专用容器中构建和部署这两个应用程序，并更新代理容器的 nginx conf 文件以将请求转发到这些容器，如下所示 -
location / {
proxy_pass http://global-app:80;
}
location /app1/ {
proxy_pass http://app1:80/;
}
- 您可以使用nginx容器的IP地址和端口来访问全局应用程序。
我希望我已经包含了实现基于微应用程序的架构所需的所有步骤。您可以参考作为此 PoC 的一部分创建的以下 git 存储库 -
https://github.com/mechcloud/large-app-docker
https://github.com/mechcloud/large-app
https://github.com/mechcloud/large-app-plugin1
虽然我不是客户端 JS 框架内部的专家，但我相信这种方法也适用于其他 JS 框架（Angular、React 等）。
| 归档时间： |
|
| 查看次数： |
2669 次 |
| 最近记录： |