Resources that could not be loaded into remote in the host project and components that could not be rendered

[lamborghiniwei]

remote vite.config.ts
`import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
plugins: [
vue(),
federation({
name: 'remote',
filename: 'remoteEntry.js',
exposes: {
'./HelloWorld': './src/components/HelloWorld.vue'
},
shared: {
vue: {
requiredVersion:'^3.0.0'
}
}
})
],
build: {
target:'esnext', // 针对非行内样式，需要构建规格为 es2020，否则样式会失效，控制台给出提示
minify: false,
cssCodeSplit: false,
rollupOptions: {
output: {
minifyInternalExports: false
}
}
}
})

`

host
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import federation from "@originjs/vite-plugin-federation"; // https://vitejs.dev/config/ export default defineConfig({ server:{ host: "192.168.80.10", port: 5100 }, cacheDir: "node_modules/.cacheDir", // 存储缓存文件的目录，非关键配置项 plugins: [ vue(), federation({ name: "home", remotes: { remote: "http://localhost:3000/assets/remoteEntry.js", }, shared: { vue: { requiredVersion:'^3.0.0' } } }) ], build: { target:'es2020', minify: false, cssCodeSplit: true, rollupOptions:{ output:{ minifyInternalExports:false } } } });

host main.js
`import { createApp, defineAsyncComponent } from 'vue'
import App from './App.vue'

const HelloWorld = defineAsyncComponent(() => import("remote/HelloWorld"))
const app = createApp(App)

// import("remote/HelloWorld").then(res => {
// console.log(res, 'res----')
// app.component("remote-button", res);
// })

app.component("remote-hellow", HelloWorld);
app.mount('#app')
`
result: Resources that could not be loaded into remote in the host project and components that could not be rendered

[konpeki622]

You can open an issue in vite-plugin-federation/issues .