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

 更新时间:2026年06月15日 10:22:17   作者:前端毕业班  
这篇文章主要介绍了uniapp vue3小程序无法开启sourcemap解决方法,文中通过图文及代码介绍了如何通过插件uni-toolkit/vite-plugin-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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中的自定义属性并获得属性的值方式

    vue中的自定义属性并获得属性的值方式

    这篇文章主要介绍了vue中的自定义属性并获得属性的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue Element前端应用开发之树列表组件

    Vue Element前端应用开发之树列表组件

    本篇随笔主要介绍树列表组件和下拉列表树组件在项目中的使用,以及一个SplitPanel的组件。
    2021-05-05
  • SpringBoot+Vue3实现文件的上传和下载功能

    SpringBoot+Vue3实现文件的上传和下载功能

    上传文件和下载文件是我们平时经常用到的功能,接下来就让我们用SpringBoot,Vue3和ElementPlus组件实现文件的上传和下载功能吧,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • vue3如何定义变量及ref、reactive、toRefs特性说明

    vue3如何定义变量及ref、reactive、toRefs特性说明

    这篇文章主要介绍了vue3如何定义变量及ref、reactive、toRefs特性说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 如何使用ant-design-vue的Table组件

    如何使用ant-design-vue的Table组件

    这篇文章主要介绍了如何使用ant-design-vue的Table组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue3配置路由ERROR in [eslint]报错问题及解决

    Vue3配置路由ERROR in [eslint]报错问题及解决

    这篇文章主要介绍了Vue3配置路由ERROR in [eslint]报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    Vue+ECharts实现中国地图的绘制及各省份自动轮播高亮显示

    这篇文章主要介绍了Vue+ECharts实现中国地图的绘制以及拖动、缩放和各省份自动轮播高亮显示,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • vue接入ts基本方法

    vue接入ts基本方法

    这篇文章主要介绍了vue接入ts基本方法,关于ts,也出了很久,下面我们就来简单学习了下ts并且在原有项目上接入基本ts语法,也算是一个初级尝试,简单梳理下基础的接入配置和已经遇到的问题,供需要的小伙伴们参考
    2022-01-01
  • 一文详解vue3 watchEffect监听的各种姿势用法

    一文详解vue3 watchEffect监听的各种姿势用法

    watchEffect 会自动追踪在其回调函数中使用的所有响应式依赖,无需显式指定数据源,本文将为大家总结一下vue3 watchEffect监听的各种用法,有需要的可以了解下
    2026-03-03
  • vue3中v-model的原理示例详解

    vue3中v-model的原理示例详解

    原生 JavaScript 实现,模拟 Vue 3 的 v-model 功能,包括表单元素和组件支持,我们将逐步构建代码,并提供使用示例,对vue v-model原理解析感兴趣的朋友一起看看吧
    2025-04-04

最新评论