如何将整个 Vue 应用程序捆绑为单个 UMD 模块

Question

I want to bundle a vue app with the styles and everything into a single UMD javascript module using vue-cli-service so that I can import it into another Vue app via my component distribution server.我想使用 vue-cli-service 将 vue 应用程序与 styles 和所有内容捆绑到单个 UMD javascript 模块中，以便我可以通过我的组件分发服务器将其导入另一个Vue 应用程序。 I am able to do this with one component on the serve, but I don't know how I'll be able to bundle an entire app and load it remotely into a separate app.我可以使用服务器上的一个组件来做到这一点，但我不知道如何捆绑整个应用程序并将其远程加载到单独的应用程序中。 I use this article as a guide https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/我以这篇文章为指导https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/

This is where I am importing it:这是我要导入它的地方：

  {
path: '/games',
component: GamesHome,
children: [
  {
    path: 'fun',
    component: () =>
      externalComponent(
        'http://localhost:8200/game/Game.cd590421a6d6835e7ae2.umd.min.js'
      ),
    name: 'Fun Game'
  }
] }

So basically how do I create a Vue app then bundle it entirely with CSS and all using vue-cli-service所以基本上我如何创建一个 Vue 应用程序，然后将它与 CSS 完全捆绑在一起，并且全部使用 vue-cli-service

Answer 1

This is the problem which I have been trying to solve from day 1 ever since I started using VueJS.自从我开始使用 VueJS 以来，这是我从第一天开始就一直在尝试解决的问题。 I will not consider a client side JS framework if it does not provide a solution for this problem.如果客户端 JS 框架没有为这个问题提供解决方案，我不会考虑它。

I recently did a PoC in this and able to consume a VueJS application as module in another VueJS application.我最近在这方面做了一个 PoC，并且能够在另一个 VueJS 应用程序中使用一个 VueJS 应用程序作为模块。 In my case I have a suite of VueJs applications where each of these applications is running in its own dedicated docker container.就我而言，我有一套 VueJs 应用程序，其中每个应用程序都在其自己的专用 docker 容器中运行。 These applications have a lot of functionality which is common across all the applications.这些应用程序具有许多在所有应用程序中通用的功能。 So I decided to move this common code (page layout, css frameworks etc) to a separate VueJS application and consume all existing VueJS applications as modules in this global application.所以我决定将这个通用代码（页面布局、css 框架等）移动到一个单独的 VueJS 应用程序中，并将所有现有的 VueJS 应用程序作为这个全局应用程序中的模块来使用。 I call this micro-app based architecture to differentiate it from micro-frontends based architecture because it does not use multiple client side JS frameworks and does not require another framework to achieve this.我称这种基于微应用的架构是为了将其与基于微前端的架构区分开来，因为它不使用多个客户端 JS 框架，也不需要另一个框架来实现这一点。 This is how the deployment architecture looks like in my case (you can ignore kubernetes specific stuff if your are not aware about it) -这就是我的部署架构的样子（如果你不知道，你可以忽略kubernetes特定的东西） -

Coming back to implementation part, you need to take a step wise approach to convert a VueJS application to a micro-app.回到实现部分，您需要采取逐步的方法将 VueJS 应用程序转换为微应用程序。

Lets say you project structure look as following (it shows only few files which require changes and NOT all the files) -假设您的项目结构如下所示（它仅显示需要更改的少数文件而不是所有文件） -

app-1
  public
    index.html
  src
    main.js
    App.vue
    router
      index.js
    store
      index.js

Split your vuex state and routes files into global and application specific files -拆分您的 vuex state 并将文件路由到全局和应用程序特定文件 -

app-1
  public
    index.html
  src
    main.js
    App.vue
    router
      app1
        index.js
      index.js
    store
      app1
        index.js
      index.js

Make a copy of this project (global-app), remove global-app specific files from app-1 and app-1 from specific files from global-app .制作此项目（global-app）的副本，从app-1中删除global-app特定文件，并从global-app -app 中的特定文件中删除 app- app-1 。 Also remove index.html and App.vue from app-1 project -还要从app-1项目中删除index.html和App.vue -

Add ROUTES and STORE_MODULES variables to index.html file of global-app -将ROUTES和STORE_MODULES变量添加到global-app的index.html文件中 -

<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>

Update router\index.js file of global-app for ROUTES variable -为ROUTES变量更新global-app的router\index.js文件 -

const routes = [
  ....
  ....
]
routes.push(...ROUTES)

const router = new VueRouter({

Update store\index.js file of global-app for STORE_MODULES variable -为STORE_MODULES变量更新global-app的store\index.js文件 -

export default new Vuex.Store({
    ....
    ....
    modules: STORE_MODULES
})

Clear content of app-1\src\main.js file and replace it with following content -清除app-1\src\main.js文件的内容并将其替换为以下内容 -

import routes from '@/router/app1'
import app1 from '@/store/app1'

ROUTES.push(...routes)

STORE_MODULES['app1'] = app1

Define build-app command under scripts block of package.json file of app-1 -在app-1的package.json文件的scripts块下定义build-app命令 -

....
"scripts": {
  "build-app": "vue-cli-service build --target lib --formats umd-min --no-clean --name micro-app src/main.js"
},
....

Now build and deploy these two applications in their dedicated containers and update nginx conf file of proxy container to forward requests to these containers as following -现在在它们的专用容器中构建和部署这两个应用程序，并更新代理容器的 nginx conf 文件以将请求转发到这些容器，如下所示 -

location / {
    proxy_pass  http://global-app:80;     
}
    
location /app1/ {
    proxy_pass  http://app1:80/;     
}

You can access global app by using IP address and port of nginx container.您可以使用 IP 地址和 nginx 容器的端口来访问全局应用程序。

I hope I have included all the steps which are required to implement micro-app based architecture.我希望我已经包含了实现基于微应用的架构所需的所有步骤。 You can refer following git repositories which were created as part of this PoC -您可以参考以下作为此 PoC 的一部分创建的 git 存储库 -

https://github.com/mechcloud/large-app-docker
https://github.com/mechcloud/large-app
https://github.com/mechcloud/large-app-plugin1

While I am not an expert in the internals of client side JS frameworks, I believe this approach will work for other JS frameworks (Angular, React etc) as well.虽然我不是客户端 JS 框架内部的专家，但我相信这种方法也适用于其他 JS 框架（Angular、React 等）。

如何将整个 Vue 应用程序捆绑为单个 UMD 模块

问题描述

1 个解决方案

解决方案1
4 2020-08-20 04:39:54

如何将整个 Vue 应用程序捆绑为单个 UMD 模块

问题描述

1 个解决方案

解决方案1 4 2020-08-20 04:39:54

解决方案1
4 2020-08-20 04:39:54