快捷導(dǎo)航

uniapp?vue3小程序無法開啟sourcemap解決方法

更新時間：2026年06月15日 10:22:17 作者：前端畢業(yè)班

這篇文章主要介紹了uniapp vue3小程序無法開啟sourcemap解決方法,文中通過圖文及代碼介紹了如何通過插件uni-toolkit/vite-plugin-sourcemap解決此問題,提供多種配置方式以適應(yīng)不同開發(fā)環(huán)境需求,需要的朋友可以參考下

前言

目前，uni-app vue3 版本的 cli 項(xiàng)目運(yùn)行到小程序時無法開啟 sourcemap，導(dǎo)致開發(fā)調(diào)試體驗(yàn)不佳。比如：

這個問題已經(jīng)被社區(qū)反饋了很久了，官方也一直沒有給出明確的解決方案。本文分享如何通過一個插件來解決此問題。

解決方案

我們可以通過一個插件 @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 配置
  ],
});

運(yùn)行到小程序后可以看到，sourcemap 正常生成

配置

該插件默認(rèn)在開發(fā)環(huán)境啟用，生產(chǎn)環(huán)境不啟用。同時也支持通過傳入?yún)?shù)來控制：

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

mode: 指定在哪些環(huán)境下開啟 sourcemap，默認(rèn) development
- development: 僅當(dāng) NODE_ENV=development 時開啟
- production: 僅當(dāng) NODE_ENV=production 時開啟
- all: 所有環(huán)境都開啟

寫在最后

到此這篇關(guān)于uniapp vue3小程序無法開啟sourcemap解決方法的文章就介紹到這了,更多相關(guān)uniapp vue3小程序無法開啟sourcemap內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中的自定義屬性并獲得屬性的值方式
這篇文章主要介紹了vue中的自定義屬性并獲得屬性的值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue Element前端應(yīng)用開發(fā)之樹列表組件
本篇隨筆主要介紹樹列表組件和下拉列表樹組件在項(xiàng)目中的使用，以及一個SplitPanel的組件。
2021-05-05
SpringBoot+Vue3實(shí)現(xiàn)文件的上傳和下載功能
上傳文件和下載文件是我們平時經(jīng)常用到的功能，接下來就讓我們用SpringBoot，Vue3和ElementPlus組件實(shí)現(xiàn)文件的上傳和下載功能吧，感興趣的朋友跟隨小編一起看看吧
2023-01-01
vue3如何定義變量及ref、reactive、toRefs特性說明
這篇文章主要介紹了vue3如何定義變量及ref、reactive、toRefs特性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
如何使用ant-design-vue的Table組件
這篇文章主要介紹了如何使用ant-design-vue的Table組件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3配置路由ERROR in [eslint]報錯問題及解決
這篇文章主要介紹了Vue3配置路由ERROR in [eslint]報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示
這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
vue接入ts基本方法
這篇文章主要介紹了vue接入ts基本方法，關(guān)于ts，也出了很久，下面我們就來簡單學(xué)習(xí)了下ts并且在原有項(xiàng)目上接入基本ts語法，也算是一個初級嘗試，簡單梳理下基礎(chǔ)的接入配置和已經(jīng)遇到的問題，供需要的小伙伴們參考
2022-01-01
一文詳解vue3?watchEffect監(jiān)聽的各種姿勢用法
watchEffect 會自動追蹤在其回調(diào)函數(shù)中使用的所有響應(yīng)式依賴,無需顯式指定數(shù)據(jù)源,本文將為大家總結(jié)一下vue3?watchEffect監(jiān)聽的各種用法,有需要的可以了解下
2026-03-03
vue3中v-model的原理示例詳解
原生 JavaScript 實(shí)現(xiàn),模擬 Vue 3 的 v-model 功能,包括表單元素和組件支持,我們將逐步構(gòu)建代碼,并提供使用示例,對vue v-model原理解析感興趣的朋友一起看看吧
2025-04-04