目录前言主应用微应用部署前言因为业务系统接入的需要，决定将一个vue3+vite+ts的主应用系统，改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。网上有很多关于微应用改造的案例，但很多都没写部署之后什么情况。写了部署的，没有实操部署在二级目录、三级目录是什么情况，甚至没有对部署之后的情况做测试、没有说明。这是在整个改造过程中最难的一点，也是最困扰我的一个问题。我们所改造的应用说明：主应用：vue3+vite+ts微应用1：vue2，qiankun官网API是基于vue2+webpack，我们对vue2也进行了接入，但是在本篇文章中不做说明。微应用2：
系列文章目录（点击查看）文章目录系列文章目录（点击查看）前言一、了解Vue3二、了解Vite三、了解TypeScript四、了解Pinia五、了解Sass总结前言旨在帮助初学者掌握使用现代前端技术栈构建应用的基础知识和技能。在这个系列中，我们将深入探讨如何结合Vue.js、Vite、TypeScript、Pinia和Sass这些强大的工具和框架来开发现代化的前端应用。通过这个系列，我们将从零开始构建一个完整的前端项目，覆盖项目初始化、组件开发、状态管理、样式处理等方方面面。我们将介绍每个技术的基本概念，并提供实际的代码示例和最佳实践，让读者能够快速上手并建立扎实的技术基础。不论你是刚入门前端开
语言及配置：vue、vantui、vite报错信息[vite]httpproxyerror:Error:readECONNRESETatTLSWrap.onStreamRead(node:internal/stream_base_commons:217:20)或者[vite]httpproxyerror:Error:connectETIMEDOUT2606:4700:3037::6815:532d:443atTCPConnectWrap.afterConnect[asoncomplete](node:net:1494:16)解决办法官方文档：SM.MSv2APIDocs。在官方文档中指定上传的
一、了解qiankun.jsqiankun-qiankun1.1、简单，任意js框架均可使用。微应用接入像使用接入一个iframe系统一样简单，但实际不是iframe。1.2、完备，几乎包含所有构建微前端系统时所需要的基本能力，如样式隔离、js沙箱、预加载等。解耦，与技术无关。1.3、生产可用，已在蚂蚁内外经受过足够大量的线上系统的考验及打磨，健壮性值得信赖。1.4、qiankun是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。1.5、qiankun孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，目前qiankun已在蚂蚁内部
文章目录前言一、构建基础项目模板二、根据基础模版搭建优化项目结构（持续更新中）A、环境配置优化B、优化生产构建后console和debugger关闭C、优化文件引用路径D、优化项目全局文件类型声明配置（ts的泛型）E、配置css全局变量F、新建文件夹（不同功能内容分开放）G、引入axiosH、项目开发中难免遇到的跨域问题I、多语言配置K、状态管理引入（pinia、Vuex）J、按需引入资源K、优化构建三、项目结构再次优化总结前言时过境迁，我们见证了诸如webpack、Rollup和Parcel等工具的变迁，它们极大地改善了前端开发者的开发体验。然而，当我们开始构建越来越大型的应用时，需要处理的
解决：安装path模块 npminstall--save-dev@types/node vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue()],resolve:{alias:{'@':path.resolve(__dirname,'src')}}}) Nomatchingexportin"src/router/inde
一、配置文件//vitest.config.tsimport{fileURLToPath}from'node:url'import{mergeConfig,defineConfig}from'vite'import{configDefaults}from'vitest/config'//importviteConfigfrom'./vite.config'importvuefrom'@vitejs/plugin-vue'importvueJsxfrom'@vitejs/plugin-vue-jsx'exportdefaultmergeConfig(defineConfig({//安装了tsx插
准备教程安装eslint官网vue-eslintts-eslint安装eslintyarnaddeslint-D生成配置文件npxeslint--init安装其他插件yarnadd-Deslint-plugin-importeslint-plugin-vueeslint-plugin-nodeeslint-plugin-prettiereslint-config-prettiereslint-plugin-node@babel/eslint-parservue-eslint-parser修改.eslintrc.cjsmodule.exports={env:{browser:true,es202
本篇博客记录解决Vite打包时报错：in"/index.html"can'tbebundledwithouttype="module"attribute或xxx.cssdidn'tresolveatbuildtime,itwillremainunchangelremainunchangedtoberesolvedatruntime当我们通过标签 引入js脚本代码时，出现：can'tbebundledwithouttype="module"attribute，报错大致意思是我们引入js文件时缺少了type='module'属性。 关于标签的属性type=‘module’，如果有疑惑，请看文章：在
vite介绍Vite名字来源于法语,意思为quickly–“快速”。在整体功能上实现了类似于预配置的webpack加devserver的功能，用于提高前端项目的整体构建速度。它采用了全新的unbundle思想来提升整体的前端开发体验。比起传统的webpack构建，在性能速度上都有了质的提高。vite速度快的原因之前浏览器是不支持ESModules的，为了在让浏览器能够运行我们写的代码（es6语法、.jsx/.vue文件），我们需要使用打包工具，例如webpack，来实现代码的转换和优化的a过程；2.在浏览器支持ESModules后，import、export、搭建项目我们通过这篇文章，将解决以
