用 vue create xxx
创建 vue3 项目的,选择了 babel + router ,
子应用main.js:
import { h, createApp } from 'vue'
import App from './App.vue'
import router from './router'
import singleSpaVue from 'single-spa-vue'
const appOptions = {
el: '#vue3',
router,
render: () => {
return h(App, {});
}
}
const vueLifeCycle = singleSpaVue({ createApp, appOptions })
export const bootstrap = vueLifeCycle.bootstrap;
export const mount = vueLifeCycle.mount;
export const unmount = vueLifeCycle.unmount;
子应用vue.config.js:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
output: {
library: 'singleVue3',
libraryTarget: 'umd'
},
devServer: {
port: 8088
}
}
})
子应用默认的 App.vue:
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
父应用App.vue:
<router-link to="/vue3">vue 子应用</router-link>
<div id="vue3"></div>
父应用main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'
async function loadScript(url) {
return new Promise((resolve, reject) => {
let script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
})
}
registerApplication('myVueApp',
async () => {
console.log('加载模块')
await loadScript(`http://localhost:8088/js/chunk-vendors.js`)
await loadScript(`http://localhost:8088/js/app.js`)
return window.singleVue3;
},
location => location.pathname.startsWith('/vue3')
)
start();
createApp(App).use(router).mount('#app')
父应用显示 /vue3 如下所示:
不知道是什么问题,导致这里 router-link 直接这样显示?
试了下 vue2 项目,是可以在父应用中 router-link 显示成 a 标签的。
其中版本如下:
"core-js": "^3.8.3",
"single-spa": "^5.9.4",
"vue": "^3.2.13",
"vue-router": "^4.0.3",
"single-spa-vue": "^2.5.1",
你好,找到原因了吗,遇到了同样的问题
– ss_shen 7个月前