uniapp vue3 解决小程序无法开启 sourcemap

前言

目前，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

import { defineConfig } from 'vite';
import uni from "@dcloudio/vite-plugin-uni";
import sourcemap from '@uni_toolkit/vite-plugin-sourcemap';

export default defineConfig({
  plugins: [
    uni(),
    sourcemap(), // 插件需要放在 uni 插件后面，以确保正确覆盖 sourcemap 配置
  ],
});

运行到小程序后可以看到，sourcemap 正常生成

配置

该插件默认在 开发环境 启用，生产环境 不启用。同时也支持通过传入参数来控制：

interface VitePluginSourcemapOptions {
  mode?: 'development' | 'production' | 'all';
}

• mode: 指定在哪些环境下开启 sourcemap，默认 development
  • development: 仅当 NODE_ENV=development 时开启
  • production: 仅当 NODE_ENV=production 时开启
  • all: 所有环境都开启

写在最后

感觉您耐心看完这篇文章，希望您能喜欢。这里是《前端毕业班》，前端开发者的自救互助小组。在 AI 与不确定性并存的时代，我们一起看清焦虑，聊技术、聊趋势，也聊前端还能走多远，走去哪。