我們正在嘗試使用ModuleFederationPlugin來自 Webpack 5.61.0 的微前端。我覺得好無助。我正在使用@vue/[email protected]. 在vue.config.js這暴露了其模塊的外觀下面喜歡，
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
publicPath: "http://localhost:8080/",
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "items",
filename: "remoteEntry.js",
exposes: {
"./ItemsBase": "./src/components/ItemsBase.vue"
},
shared: require("./package.json").dependencies
})
]
},
transpileDependencies: [
'vuetify'
]
})
而消費者的vue.config.js樣子，
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
publicPath: "http://localhost:8081/",
configureWebpack: {
plugins: [
new ModuleFederationPlugin({
name: "my_shop",
filename: "remoteEntry.js",
remotes: {
"items": "items@http://localhost:8080/remoteEntry.js"
},
shared: require("./package.json").dependencies
})
]
},
transpileDependencies: [
'vuetify'
]
})
我bootstrap.js在兩個專案中都有，我正在像import('./bootstrap')frommain.js
在消費者專案中匯入它，我們試圖像這樣匯入遠程組件。
<template>
<div >
<ItemsBase></ItemsBase>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: 'HomeView',
components: {
ItemsBase: () => import("items/ItemsBase")
}
}
</script>
這種混合基于帶有 vue-cli 的 webpack 示例：https : //github.com/module-federation/module-federation-examples/tree/master/vue-cli
唯一的區別是他們正在使用[email protected]但都具有相同的 webpack 版本（我的原型和 webpack 示例）。
現在有趣的部分是我在消費者專案中遇到以下錯誤。
ScriptExternalLoadError: Loading script failed
有任何想法嗎？
編輯： 另一個區別是來自 webpack 的 vue-cli 示例使用的是 yarn 而我使用的是 npm 這只是無關緊要但認為也許值得一提，因為他們的示例有效！！！
uj5u.com熱心網友回復：
好吧，我發現了為什么會這樣。我在 github 上的 vue-cli 上打開了一個問題。 https://github.com/vuejs/vue-cli/issues/6823
星期六（06.11）[email protected] 在 npm 和 npm 上發布，我無法再次為任何 vue-cli 版本創建新的 vue 應用程式。因為它在 package.json 中添加了每個包的 5.0.0 版本，顯然它們在 npm 中不存在，但它適用于紗線。我無法使用模塊聯合，[email protected]但正如在 vue-cli 的 webpack 示例中使用的那樣，我可以使用[email protected].
uj5u.com熱心網友回復：
我遇到了同樣的問題，并讓它與[email protected]. 我所做的是在像這樣加載 MF 之前洗掉splitChunks：
config.optimization.delete('splitChunks');
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/355029.html
標籤：网络包 Vuejs2 webpack-module-federation