webpack模块联盟和vue 2.16.12的单一spa-vue不工作

Question

我正在开发一个带有单个spa vue和vue 2.6.12的microfront，但它根本不起作用。

我使用的是webpack模块联盟插件。

这是我的切入点。

src/app.ts
import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import Main from './Main.vue';
import router from './router';
const lifecycles = singleSpaVue({
Vue,
appOptions: {
render(h: any) {
return h(Main as any);
},
router,
} as any,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

这是我的webpack.config.js文件

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');
module.exports = {
entry: './src/index',
cache: false,
mode: 'development',
devtool: 'source-map',
optimization: {
minimize: false,
},
output: {
publicPath: 'http://localhost:3002/',
},
resolve: {
extensions: ['.js', '.ts', '.json', '.vue'],
alias: {
'~' : path.resolve(__dirname, 'node_modules')
}
},
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
},
contentBase: outputPath,
disableHostCheck: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /.s[ac]ss$/i,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /.vue$/,
loader: 'vue-loader',
},
{
test: /.js$/,
loader: 'babel-loader',
},
{
test: /.ts?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/],
},
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new StandaloneSingleSpaPlugin({
// required
appOrParcelName: "body",
// optional - strongly encouraged for single-spa applications
activeWhen: ['/'],
// optional - defaults to true - turns on or off import-map-overrides.
importMapOverrides: true,
}),
new VueLoaderPlugin(),
new ModuleFederationPlugin({
name: 'content',
library: { type: 'var', name: 'content' },
filename: 'remoteEntry.js',
remotes: {
content: 'content'
},
exposes: {
Content: './src/app',
},
}),
],
}

这是我的index.ts文件

src/index.ts
import { start, registerApplication } from 'single-spa'
registerApplication({
name: 'content',
app: () => import('content/Content' as any),
activeWhen: '/',
},)
start()

当我运行yarn start并转到localhost:3002时，这就是错误。

错误图像

有人能帮我吗？

谢谢！

Answer 1

好吧，可能是你混合了主机容器和远程容器的关系，我看到你的ModuleFederationPlugin配置，特殊的remotes和name是一样的，看起来不正确。