javascript - 带有 vue 2.16.12 的 webpack 模块联合和 single-spa-vue 不起作用
问题描述
我正在使用 single-spa-vue 和 Vue 2.6.12 开发一个微前端,但它根本不工作。
我正在使用 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这是错误。
有人可以帮助我吗?
谢谢!
解决方案
嗯,可能是你混淆了主机容器和远程容器的关系,我看到你的ModuleFederationPlugin
配置很特别remotes
,而且name
是一样的,看起来不正确。
推荐阅读
- flutter - Flutter:如何在经过一定时间后自动更改页面?
- python - 层 conv1d 的输入 0 与层不兼容::预期 min_ndim=3,发现 ndim=2。收到的完整形状:(无,30)
- docker - 如何使用 Docker 到 Apache 的多个端口?
- visual-studio-code - vscode extensionHost 启动的当前工作目录
- php - 如何使用php从任何文件中获取css文件?
- java - 如何在一个命令中编译一堆“.java”文件?
- python - how to stop this loop from repeating
- java - 从数组中提取json数据
- angular - “找不到模块'@schematics/angular/utility/config'
- android - kotlin-reflect 库导入问题