vue2 使用@vue/composition-api依賴(lài)包 編譯、打包各種報(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 依賴(lài)包，在實(shí)際開(kāi)發(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) 類(lèi)似于以下的錯(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 依賴(lài)包
解決辦法
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è)依賴(lài)間的版本依賴(lài)關(guān)系，如果版本不一致，可能出現(xiàn)依賴(lài)不兼容的問(wèn)題。
到此這篇關(guān)于vue2 使用@vue/composition-api依賴(lài)包 編譯、打包各種報(bào)錯(cuò)的文章就介紹到這了,更多相關(guān)vue2 使用@vue/composition-api內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決vue elementUI中table里數(shù)字、字母、中文混合排序問(wèn)題
這篇文章主要介紹了vue elementUI中table里數(shù)字、字母、中文混合排序問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue和react中props變化后如何修改state，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問(wèn)題
今天小編就為大家分享一篇解決vue 項(xiàng)目引入字體圖標(biāo)報(bào)錯(cuò)、不顯示等問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
詳解Vue-Router源碼分析路由實(shí)現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實(shí)現(xiàn)原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了vue?iview封裝模態(tài)框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vue.js使用v-pre與v-html輸出HTML操作示例
這篇文章主要介紹了vue.js使用v-pre與v-html輸出HTML操作,結(jié)合實(shí)例形式分析了vue.js基于v-pre與v-html屬性輸出HTML的具體操作技巧,需要的朋友可以參考下2018-07-07
Vue router的addRoute方法實(shí)現(xiàn)控制權(quán)限方法詳解
這篇文章主要介紹了vue動(dòng)態(tài)路由添加，vue-router的addRoute方法實(shí)現(xiàn)權(quán)限控制流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
網(wǎng)站中我們經(jīng)?？吹接袀€(gè)導(dǎo)航路徑,可以直觀地顯示當(dāng)前頁(yè)面的路徑,并快速返回之前的任意頁(yè)面,這是一個(gè)非常實(shí)用的功能,也是在Web前端必備的導(dǎo)航UI之一,這篇文章主要給大家介紹了關(guān)于vue3自己封裝面包屑功能組件的幾種方式,需要的朋友可以參考下2021-09-09
Vuex modules模式下mapState/mapMutations的操作實(shí)例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue?使用el-table循環(huán)生成表格的過(guò)程
這篇文章主要介紹了vue?使用el-table循環(huán)生成表格的過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04