admin管理员组

文章数量:1426220

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 ponent distribution server. I am able to do this with one ponent 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 /

This is where I am importing it:

  {
path: '/games',
ponent: GamesHome,
children: [
  {
    path: 'fun',
    ponent: () =>
      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

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 ponent distribution server. I am able to do this with one ponent 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/blog/distributed-vue-applications-loading-ponents-via-http/

This is where I am importing it:

  {
path: '/games',
ponent: GamesHome,
children: [
  {
    path: 'fun',
    ponent: () =>
      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

  • javascript
  • vue.js
  • vuejs2
  • module
Share Improve this question asked May 14, 2020 at 19:17 LeanKhanLeanKhan 1012 silver badges12 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

This is the problem which I have been trying to solve from day 1 ever since I started using VueJS. I will not consider a client side JS framework if it does not provide a solution for this problem.

I recently did a PoC in this and able to consume a VueJS application as module in another VueJS application. In my case I have a suite of VueJs applications where each of these applications is running in its own dedicated docker container. These applications have a lot of functionality which is mon across all the applications. So I decided to move this mon code (page layout, css frameworks etc) to a separate VueJS application and consume all existing VueJS applications as modules in this global application. 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. This is how the deployment architecture looks like in my case (you can ignore kubernetes specific stuff if your are not aware about it) -

Coming back to implementation part, you need to take a step wise approach to convert a VueJS application to a micro-app.

  • 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 -
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. Also remove index.html and App.vue from app-1 project -

  • Add ROUTES and STORE_MODULES variables to index.html file of global-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>
  • Update router\index.js file of global-app for ROUTES variable -
const routes = [
  ....
  ....
]
routes.push(...ROUTES)

const router = new VueRouter({
  • Update store\index.js file of global-app for STORE_MODULES variable -
export default new Vuex.Store({
    ....
    ....
    modules: STORE_MODULES
})
  • Clear content of app-1\src\main.js file and replace it with following content -
import routes from '@/router/app1'
import app1 from '@/store/app1'

ROUTES.push(...routes)

STORE_MODULES['app1'] = app1
  • Define build-app mand under scripts block of package.json file of app-1 -
....
"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 -
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.

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 -

https://github./mechcloud/large-app-docker
https://github./mechcloud/large-app
https://github./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.

本文标签： javascriptHow can I bundle an entire Vue app as a single UMD moduleStack Overflow

版权声明：本文标题：javascript - How can I bundle an entire Vue app as a single UMD module - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745471015a2659748.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。