ScriptExternalLoadError:加载脚本失败。 vue-cli@5.0.0-rc.0
Posted
技术标签:
【中文标题】ScriptExternalLoadError:加载脚本失败。 vue-cli@5.0.0-rc.0【英文标题】:ScriptExternalLoadError: Loading script failed. vue-cli@5.0.0-rc.0 【发布时间】:2021-12-20 06:32:57 【问题描述】:我们正在尝试使用来自 Webpack 5.61.0 的 ModuleFederationPlugin
的微前端。
我感到很无助。
我正在使用@vue/cli@5.0.0-rc.0
。
暴露其模块的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')
一样从main.js
导入它
在消费者项目中,我们正尝试像这样导入远程组件。
<template>
<div class="home">
<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
唯一的区别是他们使用vue-cli@5.0.0-beta.3
,但两者都有相同的 webpack 版本(我的原型和 webpack 示例)。
现在有趣的是,我在消费者项目中遇到了以下错误。
ScriptExternalLoadError: Loading script failed
有什么想法吗?
编辑: 另一个区别是 webpack 的 vue-cli 示例使用的是 yarn 而我使用的是 npm,这无关紧要,但认为可能值得一提,因为他们的示例 works!!!
编辑: 该问题正在github上关注
https://github.com/vuejs/vue-cli/issues/6823
【问题讨论】:
【参考方案1】:我知道为什么会这样了。 我在 github 上的 vue-cli 上打开了一个问题。 https://github.com/vuejs/vue-cli/issues/6823
周六 (06.11) vue-cli@5.0.0-rc.0 在 npm 上发布并且与 npm 一起使用,我无法再次为任何 vue-cli 版本创建新的 vue 应用程序。因为它在 package.json 中添加了每个包的 5.0.0 版本,显然它们在 npm 中不存在,但它适用于 yarn。
我无法让模块联合与 vue-cli@5.0.0-rc.0
一起使用,但正如 vue-cli 的 webpack 示例中所使用的那样,我可以让它与 vue-cli@5.0.0-beta-3
一起使用。
【讨论】:
【参考方案2】:我遇到了同样的问题,并让它与vue-cli@5.0.0-rc.0
一起工作。
我所做的是在像这样加载 MF 之前删除 splitChunks:
config.optimization.delete('splitChunks');
【讨论】:
嗯,谢谢。我会试试这个。 config 是 vue-cli@5.0.0-rc.0 中需要的这个新实例,对吗? 好的,我检查过了,它起作用了。我在configureWebpack -> optimization -> splitChunks: false
下添加了splitChunks以上是关于ScriptExternalLoadError:加载脚本失败。 vue-cli@5.0.0-rc.0的主要内容,如果未能解决你的问题,请参考以下文章