vue3+ts+webpack作为子应用接入乾坤主应用流程概述

Web_Sam

于 2023-03-10 16:50:55 发布

阅读量598

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/Web_Sam/article/details/129445243

版权

本文详细介绍了将一个基于Vue3、TypeScript和Webpack构建的子应用，如何进行改造以接入乾坤主应用的完整流程，包括package.json、router.ts、vue.config.ts和main.ts四个关键部分的改造步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：package.json文件改造

{
	// name属性的值需跟主应用micro-app.js中定义的子应用名称保持一致
	name:"xxx"
	...其余代码
}

二：router.ts改造

	import { ..., createMemoryHistory } from 'vue-router;
	....其余代码；
	const memory = createMemoryHistory('/apps')
	const router = createRouter({
		history: memory,
		routes
	})
	export default router

三：vue.config.ts改造

...其余代码
const packageName = require('./package.json').name
module.export = defineConfig({
	//这个要跟主应用micro-app.js中的子应用属性activeRule保持一致；
	publicPath:'XXX'，
	...其余代码
	configureWebpack:{
		output:{
		library:`${packageName}-[name]`,
		libraryTarget:'umd', //打包UMD格式
		chunkLoadingGlobal:`webpackJsonp_${packageName}`
		}
	},
	devServer:{
		headers:{
			//开发时增加跨域，表示所有人都可以访问我的服务器
			'Access-

最低0.47元/天解锁文章