vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問(wèn)題分析
最近在維護(hù)以前（大概一年前）的項(xiàng)目時(shí)，遇到個(gè)這種問(wèn)題：
項(xiàng)目本身是用 vue-cli 創(chuàng)建的 vue 2.x.xx 版本的項(xiàng)目，然后引入 @vue/composition-api 依賴包，在實(shí)際開發(fā)中使用 vue3的語(yǔ)法，
如：
import { defineComponent, reactive, toRefs } from "@vue/composition-api";
export default defineComponent({
setup(props, { root }) {
const state = reactive({ tableData: [], ... });
...
return { ...toRefs(state), ... }
})
})<template>
<el-table :data="tableData">
...
</el-table>
</template>然后 npm run dev 后進(jìn)入頁(yè)面后出現(xiàn) 類似于以下的錯(cuò)誤：
問(wèn)題來(lái)源
由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí)，node_module中的 vue 版本可能被升級(jí)為 2.7.x
// package.json "vue": "^2.6.12", "vue-template-compiler": "^2.6.12",
node_module下的 vue 依賴包
解決辦法
1：刪除當(dāng)前項(xiàng)目的 node_module 文件夾
2：刪除 package-look.json 文件
3：將 package.json 文件中的 版本號(hào)修改成固定版本
// package.json "vue": "2.6.12", "vue-template-compiler": "2.6.12",
4：重新 npm install 在運(yùn)行項(xiàng)目
ok 問(wèn)題就解決了。
注意 vue 和 vue-template-compiler 兩個(gè)依賴間的版本依賴關(guān)系，如果版本不一致，可能出現(xiàn)依賴不兼容的問(wèn)題。
到此這篇關(guān)于vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)vue2 使用@vue/composition-api內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法
這篇文章主要介紹了使用 Vue 實(shí)現(xiàn)一個(gè)虛擬列表的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法
本文通過(guò)實(shí)例代碼給大家介紹基于Vue+Openlayer實(shí)現(xiàn)動(dòng)態(tài)加載geojson的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
原生開發(fā)和Vue開發(fā)的模式和特點(diǎn),我們會(huì)發(fā)現(xiàn)是完全不同的,這里其實(shí)涉及到兩種不同的編程范式:命令式編程和聲明式編程,下面這篇文章主要給大家介紹了關(guān)于Vue簡(jiǎn)介、引入、命令式與聲明式編程的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新
這篇文章主要為大家詳細(xì)介紹了vue+echarts實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在實(shí)際開發(fā)中，不可避免的會(huì)使用到對(duì)于事件的操作，如何處理 DOM 事件流，成為我們必須要掌握的技能。這篇文章主要介紹了Vue.js 事件修飾符的使用教程,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了react和vue的事件處理差異,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能實(shí)例代碼
我們平時(shí)經(jīng)常做的是上傳文件,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中實(shí)現(xiàn)多文件上傳功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
這篇文章主要介紹了在vue中對(duì)數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03