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

最新推荐文章于 2024-06-03 11:54:34 发布

Web_Sam

最新推荐文章于 2024-06-03 11:54:34 发布

阅读量424

点赞数

文章标签： webpack 前端 javascript

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

版权

一：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-