正常操作，正常分析，大家好，我是 D1n910（蛋糕）。

可惡的蛋糕，害苦了我的同事們，是蛋糕說的，新項目，可以用新技術(shù)跑一下，沒想到這么多坑。好在現(xiàn)在暫時活了下來。

遷移之前，一定要看 Vue2.0 升級到 Vue3.0 相關(guān)的文檔。

很多問題，順手改了，也沒記下來，想必也是簡單問題。

0、項目遷移方案

用 vite 直接生成新的項目，然后再從舊項目逐步遷移代碼到新項目，vue-router、vuex、element-plus 等全家桶內(nèi)容升級到最新。

原來的 mixins 內(nèi)容，如果較為復雜，暫時不處理。不復雜的轉(zhuǎn)為 setup。

1、使用 less 報錯

在項目啟動，直接使用 less，報送以下錯誤。

[vite] Internal server error: Preprocessor dependency "less" not found. Did you install it?

原因是新初始化的項目沒有 less。

用下面的指令安裝 less 然后執(zhí)行即可。

yarn add less less-loader

2、啟動后，不能夠用ip地址訪問，只能用localhost

啟動指令添加 '--host' 配置即可。

?"dev": "vite --host"

3、安裝 eslint 后報錯，vite安裝vue項目報錯（Error: esbuild: Failed to install correctly），參考鏈接 https://blog.csdn.net/m0_37682004/article/details/115001613

手動運行

來解決esbuild安裝問題

安裝完成之后，再次運行 npm run dev 即可。

4、Vite，typescript 設(shè)置別名（類似webpack的resolve.alias）

參考自

https://blog.csdn.net/weixin_43980237/article/details/117929461

（1）修改 vite.config.ts 配置

（2）修改 tsconfig.json 配置，這樣 ts 才能檢測到

5、別名設(shè)置錯誤，重新設(shè)置

error when starting dev server:

Error: The following dependencies are imported but could not be resolved:

……?Are they installed?

這是因為第 4 步的時候設(shè)置別名搞錯了，所以需要重新設(shè)置。

7、this.$route 拿不到

參考鏈接

https://www.jianshu.com/p/00c109c36e38

router.currentRoute 來獲取

8、this.$router 拿不到

9、$on、$emit?原來?vue2.0?的事件API，vue3.0被廢棄，改為用?mitt?來實現(xiàn)

10、Vite通過代理（proxy）解決本地開發(fā)接口調(diào)用及跨域問題

參考

https://www.cnblogs.com/hy999/p/vue-vite-proxy.html

在 vite.config 中這么寫配置

vue3 在 vite.config 中無法使用import.meta.env.*的解決辦法

參考鏈接

https://www.jianshu.com/p/4973bd983e96

附帶環(huán)境變量配置

根目錄下文件命名方式

文件內(nèi)書寫方式

11、添加 eslint（todo）

https://blog.csdn.net/qq_23398171/article/details/115010584

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baiduhome_pg&wd=vite%20%E5%AE%9E%E6%97%B6%E7%9B%91%E6%B5%8B%20eslint%20%E4%BB%A3%E7%A0%81&rsv_spt=1&oq=vite%2520%25E5%25AE%259E%25E6%2597%25B6%25E7%259B%2591%25E6%25B5%258B%25E4%25BB%25A3%25E7%25A0%2581&rsv_pq=b4a56256000d953f&rsv_t=571bQpjSAO7ykPfBBs55BXsoR07Y%2FO2S6hNEfT2qZ2QpXNXMievdQ427twcrDwPr9ZkI&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=3962&rsv_sug3=60&rsv_sug1=13&rsv_sug7=100&rsv_sug2=0&rsv_sug4=4770

這個比較復雜，然后對于 vite 使用 eslint 有一個問題，我還沒搞清楚，就是如何能夠在 vite 運行時，檢測到 eslint 報錯，打斷運行，紅色提示。vite 內(nèi)部編譯報錯會這樣，但是我還沒找到 vite-eslint 的。

12、Vue 3.0 原型鏈拓展屬性（vue3.0使用TypeScript 如何拓展一個方法并且this可以訪問,不報錯？）

參考鏈接

https://www.jianshu.com/p/12faae13496d

13、拓展方法，BUS的運用，個人對于 12 的理解使用

這個作用是，模仿全局對象上掛vue實例，這樣就能夠在沒有vue實例的方法中調(diào)用 vue 實例上掛載的方法，比如 element 的 this.$message。

BUS 文件?—— any 我找個時間去一下……

14、模塊引用方式，換為 ref，看 vue3 文檔，模塊引用篇

15、elForm 表單值不能填寫

14的延伸問題，發(fā)現(xiàn)是因為 ref 對應(yīng)的變量名 和 v-model 綁定的變量名一樣了。

類似下面這樣

ref="from"

v-model="form"

改為不一樣就行了。

16、Vue3.0 typescript props 設(shè)置泛型 提示錯誤

參考

https://github.com/nuxt/typescript/issues/285

修改 eslint 配置

17、vue-router 的? addRoutes 修改為?addRoute

需要注意，addRoutes 可以傳入數(shù)組。最新的 vue-router 已廢棄??addRoutes。改為使用addRoute。

addRoute 變成單個對象了。

相當于得這樣

咱也不知道為什么要廢棄，咱也不敢問。

18、router 提示 Catch all routes ("*") must now be defined using a param with a custom regexp.

參考自?

https://blog.csdn.net/c6c6c/article/details/110558290

原因是要改為正則匹配

19、語法提示，變量名稱最好不要用 $ 或者 _? 下劃線開頭

20、Property "xxx" was accessed during render but is not defined on instance.

屬性“xxx”在渲染期間被訪問，但未在實例上定義。

就是屬性沒定義，定義一下。

21、Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

無關(guān)的非props屬性（類）已傳遞給組件，但無法自動繼承，因為組件呈現(xiàn)片段或文本根節(jié)點。

https://blog.csdn.net/qq_38888512/article/details/117224108

[Vue warn]: Extraneous non-props attributes (border, style) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

at xxxx(發(fā)生問題的組件位置)

at ...

在自定義組件上添加了border、style屬性，而自定義組件內(nèi)部又未去接收，因此警告了。

所以，要么在組件內(nèi)部加上屬性接收。如果是在第三方庫UI庫的話，建議直接去掉這些屬性。

發(fā)現(xiàn)就是 element-plus 的 dialog 不支持 class，參考 element-plus 文檔換了能夠改 class 的屬性，這個具體是什么屬性的問題，提示里其實也有給出。像下面說的“class”

22、Failed to resolve component: xxx

不能加載 xxx 組件。

引用的組件沒有在 component 聲明，或者原來全局/局部加載的組件沒有全局加載。

參考

https://blog.csdn.net/qq_41983641/article/details/115361460

23、升級 v-contextmenu 到最新版本

參考

https://github.com/heynext/v-contextmenu

yarn add v-contextmenu@next

import contextmenu from "v-contextmenu";

import "v-contextmenu/dist/themes/default.css";

Vue.use(contextmenu);

24、vue問題--[Vue Router warn]: ＜router-view＞ can no longer be used directly inside ＜transition＞ or ＜keep-

vue-router 新版本的問題，需要改寫 router-view 的包裹方式方式，參考鏈接

https://blog.csdn.net/tjj3027/article/details/109597720

25、build 構(gòu)建，vue-tsc --noEmit指令，ts 監(jiān)測了 node_modules 下的代碼

在tsconfig.json文件中使用exclude：

"exclude": [

? ?"node_modules"

?]

在 tsconfig.json 配置里加入

"compilerOptions": {

"skipLibCheck": true

}

26（todo）、build 構(gòu)建，vue-tsc --noEmit指令，ts 監(jiān)測了 template 的內(nèi)容，報送不能找到 name。

ts會檢查 template 下的內(nèi)容，寫法不兼容，所以檢測不到。未解決。

考慮

A、修改ts配置；

B、改寫為tsx寫法；

C、構(gòu)建時暫時不用?vue-tsc 先監(jiān)測；

D、其他。

目前為了趕項目上線面選用方法 C，以后會妥善解決的。

27、slot 方式改變，slot不用 v-slot，改成 #slotName

28、element-plus?elTabs tab-click 綁定方法報錯

原因是傳值變成組件實例了，所以之前取值報送 undefined

改為用 props 去獲得

比如原來的

@tab-click="doSomthing"

doSomthing(data) {

console.log(data.value)

}

改為

doSomthing(data) {

console.log(data.props.value)

}

29、vite 數(shù)據(jù)不實時視圖更新

解決方法

（1）? 重啟 vite

（2）? 查看變量名是否沖突有誤，場景：

父組件屬性名稱 aaa，通過 props 傳入子組件；

子組件內(nèi)部data命名為 aaa，覆蓋了 props 的 aaa，所以沒變化。

（3）（未嘗試）處理瀏覽器緩存?

30、切換路由報送錯誤，自定義指令錯誤

切換路由報送 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null。

Uncaught (in promise) TypeError: Cannot read property 'created' of undefined。

我這邊的原因是是自定義指令有問題，發(fā)現(xiàn)自定義指令沒有注冊成功。修復后無報錯。

31、自定義指令不生效

發(fā)現(xiàn)是因為用了已廢棄的生命周期。原來我用的 inserted 改成了 mounted。解決問題。

Vue3.0 的生命周期有修改，參考 https://v3.cn.vuejs.org/guide/custom-directive.html#%E7%AE%80%E4%BB%8B。

到了第31個問題以后，基本上項目基礎(chǔ)架構(gòu)遷移完畢了，剩下的就是繼續(xù)業(yè)務(wù)開發(fā)了。

所謂看到新技術(shù)一時爽，一用火葬場。

用了一段時間，稍微說一下自己覺得用了這些新內(nèi)容的好處。

Vue3.0確實感覺更加像 React 了，原來的一個 vue 文件走天下，現(xiàn)在似乎被打散了，帶來的我感覺就是更加靈活，更加心無所“狗”；

typescript 讓我更有規(guī)則地“狗”，幫忙發(fā)現(xiàn)代碼中的問題；（在 ts 之下，any，永遠的神！我看到很多原型的聲明也用的any。不過用any也不是很好，后面會逐步把臨時寫的any）

vite用起來目前感覺就是快，好快，因為這是內(nèi)部系統(tǒng)，所以兼容性問題不是考慮范圍內(nèi)，部署以后加載提效 42%。本地構(gòu)建也起飛???。尤大永遠的神。

繼續(xù)開發(fā)去了。

END