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: 所有环境都开启

写在最后

到此这篇关于uniapp vue3小程序无法开启sourcemap解决方法的文章就介绍到这了,更多相关uniapp vue3小程序无法开启sourcemap内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！