首页 新闻 搜索 专区 学院

vue3+single-spa 作为子、主应用, router-link 没有编译???

0
[待解决问题]

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",
emmmmmmmn的主页 emmmmmmmn | 菜鸟二级 | 园豆:220
提问于:2022-06-23 17:09
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册