vite+tsc打包報(bào)TS類(lèi)型錯(cuò)誤的問(wèn)題及解決過(guò)程
更新時(shí)間：2026年03月29日 10:30:42 作者：改了一個(gè)昵稱(chēng)
文章主要介紹了在使用vite+tsc打包Vue3項(xiàng)目時(shí),可能會(huì)遇到TS類(lèi)型錯(cuò)誤的問(wèn)題,通過(guò)配置tsconfig.json文件,可以解決這個(gè)問(wèn)題,設(shè)置"checkTypes":?false可以關(guān)閉依賴(lài)包的類(lèi)型檢查,從而避免不必要的錯(cuò)誤提示
vite+tsc打包報(bào)TS類(lèi)型錯(cuò)誤
當(dāng)新建vue3項(xiàng)目，package.json文件會(huì)自動(dòng)添加一些配置選項(xiàng)，
這些選項(xiàng)基本沒(méi)有問(wèn)題，但是在實(shí)際操作過(guò)程中，列舉一個(gè)目前我遇到的一個(gè)問(wèn)題：打包后報(bào)了一堆TS類(lèi)型錯(cuò)誤，怎么消除這些錯(cuò)誤？
報(bào)錯(cuò)信息
如下：
出現(xiàn)上面的報(bào)錯(cuò)，是因?yàn)?package.json文件中，
"scripts": {
"dev": "vite --host",
"build": "vue-tsc -b && vite build",
"preview": "vite preview"
},
vue-tsc：
- Vue官方提供的命令，用于執(zhí)行 TS 的類(lèi)型檢查。它在執(zhí)行時(shí)會(huì)根據(jù)項(xiàng)目中的
tsconfig.json文件配置進(jìn)行類(lèi)型檢查。 - 所以，可以看出來(lái)，在打包的時(shí)候編譯器執(zhí)行了TS類(lèi)型檢查，
- 所以才報(bào)了一堆錯(cuò)，但是，類(lèi)型錯(cuò)誤，不會(huì)影響項(xiàng)目的正常運(yùn)行，也就是說(shuō)，執(zhí)行
npm run dev運(yùn)行項(xiàng)目是沒(méi)有任何問(wèn)題的 - 只是
npm run build打包的時(shí)候報(bào)錯(cuò)了。
解決辦法
下面這樣即可
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview"
}
另外，項(xiàng)目通常在編譯時(shí)候，也會(huì)對(duì)我們引入的一些依賴(lài)包進(jìn)行類(lèi)型校驗(yàn)，我們并不需要這個(gè)操作，
所以，可以在 tsconfig.json 中設(shè)置如下：
"compilerOptions": {
"skipLibCheck": true
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue指令和插值的相關(guān)資料,大家應(yīng)該對(duì)指令和插值都不陌生,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
useVModel()用來(lái)實(shí)現(xiàn)父子組件間數(shù)據(jù)的雙向綁定,若不想使用默認(rèn)回調(diào),也可以自己使用emit實(shí)現(xiàn)回調(diào),這篇文章主要給大家介紹了關(guān)于vue中useVModel()使用方法的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
媒體查詢(xún)@media常見(jiàn)的不生效原因包括格式書(shū)寫(xiě)錯(cuò)誤,例如and后必須有空格；樣式?jīng)_突,后面的CSS會(huì)覆蓋前面的；CSS本身存在問(wèn)題,比如塊元素浮動(dòng)導(dǎo)致父級(jí)元素?zé)o高度而背景顏色不顯示；漏掉了meta屬性中的viewport屬性,正確書(shū)寫(xiě)和排列CSS代碼2024-10-10
前端vue3框架搭建及創(chuàng)建項(xiàng)目工程完整步驟(小白版)
很多vue初學(xué)者一開(kāi)始就在追求如何做出很炫酷的效果,而對(duì)頁(yè)面的整體布局沒(méi)有一個(gè)比較全面的了解,這篇文章主要介紹了前端vue3框架搭建及創(chuàng)建項(xiàng)目工程的相關(guān)資料,需要的朋友可以參考下2025-07-07
在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的完整代碼
這篇文章主要介紹了在 Vue 項(xiàng)目中引入 tinymce 富文本編輯器的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情
這篇文章主要介紹了Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)，動(dòng)態(tài)路由是一個(gè)常用的功能，根據(jù)后臺(tái)返回的路由json表，前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng)，本文主要實(shí)現(xiàn)的是后臺(tái)傳遞路由，前端拿到并生成側(cè)邊欄的一個(gè)形勢(shì)，需要的朋友可以參考一下2022-06-06
Vue中Key唯一標(biāo)識(shí)作用小結(jié)
key是虛擬DOM的導(dǎo)航儀,通過(guò)唯一標(biāo)識(shí)節(jié)點(diǎn),提高DOM更新效率,不綁定key或使用不穩(wěn)定的key會(huì)導(dǎo)致組件狀態(tài)錯(cuò)亂、性能下降,甚至崩潰,下面就來(lái)介紹一下Vue中Key唯一標(biāo)識(shí)作用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
詳解在Vue中如何實(shí)現(xiàn)表單圖片裁剪與預(yù)覽
在前端開(kāi)發(fā)中，表單提交是一個(gè)常見(jiàn)的操作，有時(shí)候，我們需要上傳圖片，但是上傳的圖片可能會(huì)非常大，這會(huì)增加服務(wù)器的負(fù)擔(dān)，同時(shí)也會(huì)降低用戶(hù)的體驗(yàn)，因此，我們通常需要對(duì)上傳的圖片進(jìn)行裁剪和預(yù)覽，本文主要給大家介紹如何在Vue中進(jìn)行表單圖片裁剪與預(yù)覽2023-06-06