search

maoberlehner / distributed-vue-applications-loading-components-via-http

This is an example project for the following article: https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
49 stars 14 forks source link

Can be used in vue3 #6

Open CHENLiver opened 2 years ago

CHENLiver commented 2 years ago

An error occurred in the VUe3 project

1231645601931_ pic_hd

annlumia commented 2 years ago

I got working with vue@3.2.13 with following steps:

Add webpack configuration:

// vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  // Add this
  configureWebpack: config => {
   config.externals = { vue: 'Vue' }
 }

})

and then in index file

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>

   // Add this line
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.13"></script>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
turtle-hobbit commented 2 years ago

@annlumia Hi

That looks like you got it working with Vue 3, I'm trying to do everything same way (^3.2.37) and component downloads but not renders ever.

I have warning [Vue warn]: Invalid VNode type: undefined (undefined) if import component like this:

const MyComponent = () => externalComponent('[http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js’](http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js%E2%80%99))

or

I got [Vue warn]: Async component loader resolved to undefined. If you are using retry(), make sure to return its return value. when import async-way:

const MyComponent = defineAsyncComponent(() => externalComponent('http://localhost:8080/MyComponent.b451c19a4e085013.umd.min.js'))

I've tried yours code, but no difference at all. No new warnings or errors either. May be you can help where to look for?

regards, --Sofya :)

annlumia commented 2 years ago

@turtle-hobbit hai,

Sorry if my explanation is not clear. I've created a repository for a sample project I made, it might be easier.

vue3-distributed-component

turtle-hobbit commented 2 years ago

@annlumia

Thanks a lot for your help.

regards, --Sofya :)