1、创建public-path.js
if(window.__POWERED_BY_QIANKUN__){
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}
2、改造 router
export const createRouter = () =>
new Router({
base: window.__POWERED_BY_QIANKUN__ ? '/micro-app/person' : '/',
mode: 'history',
})
const router = createRouter()
3、改造 main.js
// 引入public-path.js
import './public-path'
// 改造
let instance = null
function render(props = {}) {
const { container } = props
//
window.container = container
actions.setActions(props)
instance = new Vue({
router,
store,
data() {
return {
}
},
created() {
},
methods: {
},
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app')
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render()
}
export async function bootstrap() {
}
export async function mount(props) {
actions.setActions(props)
actions.onGlobalStateChange((state, prev) => {
})
render(props)
}
export async function unmount() {
instance.$destroy()
instance.$el.innerHTML = ''
instance = null
window.container = null
}
4、实际项目中,需要通过二级目录区分项目时,需改造
- 去除public-path.js引用