喂喂！有没有uniapp Vue3搞小程序开发的兄弟？是不是经常遇到这种崩溃时刻——小程序后台报个错，但打开源码一kan全是压缩混淆后的玩意儿？变量名是a、b、c这种鬼东西？找半天bug找不到位置？别慌！今天咱就唠唠怎么给uniapp Vue3小程序开开sourcemap！包你调试起来顺风顺水～

啥是sourcemap？简单说就是「翻译器」啦！编译后的代码和源码之间搭个桥——报错的时候直接定位到你写的.vue文件第几行第几列！不然kan压缩后的代码debugging？纯纯坐牢好吗！咱就是说谁愿意对着console里一堆「eval at 」发呆啊…

但麻烦来了——uni-app Vue3版本的CLI项目跑小程序的时候！默认根本不开sourcemap啊喂！社区里反馈这个问题多久了？少说小半年吧？官方大大倒是忙别的去了？不管不管！今天教你用个插件搞定它！包教包会～

对！就是这个@uni_toolkit/vite-plugin-sourcemap插件！我亲测有效！不是那种野鸡插件啊——社区里好多人推过放心用～安装方式超简单：

npm install @uni_toolkit/vite-plugin-sourcemap -D
# 或
pnpm add @uni_toolkit/vite-plugin-sourcemap -D
# 或
yarn add @uni_toolkit/vite-plugin-sourcemap -D

装好之后呢？就要改vite配置文件啦～记住哦！插件顺序hen重要——得放在uni后面才行！不然覆盖不了原来的配置懂吗？我第一次试就吃了亏…把插件放前面结果屁用没有哈哈

import { defineConfig } from 'vite';
import uni from "@dcloudio/vite-plugin-uni";
import sourcemap from '@uni_toolkit/vite-plugin-sourcemap';
export default defineConfig({
  plugins: ,
});

改完保存一跑项目——哇塞！源映射文件直接生成了有没有？再kan小程序开发者工具里的报错提示——直接跳转到你写的.vue文件行号！那种爽感谁懂啊…之前找一个变量错找了半小时现在秒解决!

哦对了!这个插件还Neng自定义环境呢!默认是开发环境开生产环境关—怕生产包太大对吧?贴心!但要是你偏要生产环境也开?也行!加个mode参数就行:

// 比如所有环境dou开
sourcemap 
// 或者只生产环境开  
// sourcemap

参数说明一下哈—mode有三个值:development、production、all —kan名字就懂不用我多解释了吧?反正我一般就用默认, production留着应急～

哎等等—突然想到个题外话!有没有小伙伴好奇「为什么我写的技术文章百度总不收录?」说实话这问题我也被问过好几次…核心就俩字:价值!要么你的内容是复制粘贴没营养,要么geng新太慢没人kan;搜索引擎Zui喜欢「原创+高频geng新+用户互动」的内容啦!就像咱们今天聊的sourcemap问题—Ru果你真真实实用过踩过坑,把解决过程写清楚,肯定有人kan有人搜得到!对吧?

再回到正题—有人可Neng会问「这插件安全吗?会不会有副作用?」害~我用了小半个月没发现啥问题!它只是修改了vite打包时的sourcemap配置,又不会动你的业务代码;而且只在指定环境生效, production关了之后完全不影响打包体积—放心冲!

还有Zui后一步验证!运行到小程序之后点进「开发者工具」->「调试器」->「Sources」面板—是不是Nengkan到你的src目录下的源码文件?没错没错!那就是成功啦!

感觉你Neng耐心kan到这儿哈哈~这里是《前端毕业班》嘛,前端人自己的小圈子—AI时代卷得厉害,但咱们不急着焦虑;聊技术bug、聊行业趋势、甚至聊「前端还Neng火多久」这种接地气问题~下次遇到uniapp sourcemap打不开?翻回这篇就行!保准管用～

对了interface VitePluginSourcemapOptions里那个mode参数—刚才提过啦,再跟你确认一遍:development仅开发开,production仅生产开,all全环境—记不住就存个笔记哈!