背景年前开始负责新项目开发，是一个h5内嵌到企业微信。技术栈是vite2.x+vue3.x。随着业务的开展，版本迭代，页面越来越多，第三方依赖也越来越多，打出来的包也越来越大。针对这个问题，很容易就会想到分包这个解决方案。根据vite官方文档提示，做了vendor分包之外，还对路由引用的组件做了异步加载处理，也会产生独立分包。这种配置在某个阶段是没问题的。遇到问题在vite配置文件，通过build.rollupOptions.output.manualChunks配合手动分包策略之后，vite不会自动生成vendor包当页面越来越多，配置了动态引入页面之后，打包出来会产生chunk碎片，如几个

image.pngVite+vue3打包后报错Failedtoconstruct‘URL‘:InvalidURL网上查资料解决方式是：build:{target:'es2020'},optimizedeps:{esbuildoptions:{target:'es2020'}},这种解决方式在高版本浏览器是可以的，但是在chrome的75版本是不可以的。如果不管低版本浏览器，以上方法就够用了，下面是从本质上去解决问题。这个bug是由于我们在img标签引入静态图片的时候使用了：newURL(路径,import.meta.url).href知识点：newURL第一个参数是路径，不是字符串报错原因分析

趁着国庆前夕整了一个vite4结合react18搭建后台管理模板，搭配上字节团队react组件库ArcoDesign，整体操作功能非常丝滑。目前功能支持多种模板布局、暗黑/亮色模式、国际化、权限验证、多级路由菜单、tabview标签栏快捷菜单、全屏控制等功能。极简非凡的布局界面、高定制化模块，用心打造每一个功能。技术栈版本"@arco-design/web-react":"^2.53.1","clsx":"^2.0.0","react":"^18.2.0","react-dom":"^18.2.0","react-router-dom":"^6.16.0","sass":"^1.67.0","

目的：项目投入使用发现很多使用起来不舒服的地方，进行优化注意!!!：最新的一次创建项目运行时候以及配置eslint部分出现了许多问题，可以结合最新的一篇vite+vue+ssg做官网再记录一下项目创建结合起来查看是否有你遇到的问题前提：在上一篇vite+vue3多页面配置记录references,loadEnv等中我详细记录了通过各种配置了解多页面项目。结果：最终代码放到gitee这里的release分支vite-vue3-multip-release之前配置不合理的地方：为了让项目启动的时候自动打开html，修改了项目根目录到views下面root：'./src/views/'，以至于out

为了熟悉vue3+ts的开发风格，搭建的一个仿小红书的WebApp（已开源）;持续迭代中......gitHub仓库：https://github.com/xxljunjun/vue3-webApp线上地址：http://www.xxljunjun.com/redbook一、搭建项目npminitvite@latest踩坑：vite项目需要node版本大于16！！！通过vite@latest创建的是vite3.0.7的版本npmrundev启动项目二、配置路径别名踩坑：vite中不支持require()语法！！！编辑vite.config.ts//如果报错就安装：npminstall--sav

前言：我们的项目是基于Elasticsearch来进行数据的存储与查询的，使用过ES的朋友应该都比较清楚，现在还没有一个比较友好的ES的桌面客户端软件可以和MySQL的桌面客户端软件媲美的，使用ES起来非常麻烦，经常会被吐槽的三个点：资深测试吐槽：为什么技术选型要选择ES，增删改查个数据麻烦的一塌糊涂，严重影响我的测试效率!研发小白吐槽：新建索引的时候，字段的类型设置咋这么麻烦呢，脚本要写一大坨!研发交接吐槽：这么多索引字段，每个字段代表什么意思啊？没有相关的说明文档吗?一个有理想的程序员：没有工具那么我们就自己写一个呗，对于程序员来说，写个小工具还不是一件想到就能做到的事情吗？说干就干，没过

 当发现找不到vite.js解决办法  主要原因就是没有下载下来vite  1.   npminstall-gcreate-vite2.npmrundev   如果还不行1.   npminstall-gcreate-vite2.npminstallvite3.npmrundev  

一、Vue3常用API导入安装依赖 pnpmi-Dunplugin-auto-import进行Vite配置文件名：vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importAutoImportfrom'unplugin-auto-import/vite'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),AutoImport({//自动导入Vue相关函数，如：ref,reactive,toRef等im

前面的章节我们都是通过HTML+JS的方式创建三维场景，从这一章节开始，我们后面将使用vite+vue3+threejs来构建三维场景。搭建项目环境打开vscode的终端管理器，输入如下命令npmcreatevite@latestvue3-threejs-app--templatevue在弹出的选择框架提醒中，按上下键盘键，选择Vue，然后回车选择JavaScript，回车提示项目创建完成，输入cdvue3-threejs-app，进入该文件夹，输入npminstall安装项目需要的依赖输入npmrundev运行查看效果目录结构项目创建完成后，目录结构如下图所示public目录用于存放静态文件

一、跨域问题解决 1.基于vite+vue3配置时，在vite.congig.js文件server项目中添加proxy代理 文件名：vite.congig.js server:{  open:true,//启动项目自动弹出浏览器  port:'3000',  proxy:{   '/api':{    target:'http://localhost:8000/api/',    changeOrigin:true,    rewrite:(path)=>path.replace(/^\/api/,'')//不可以省略rewrite   }  }2.axios封装时设置基本路径baseURL