HbuliderX搭建項(xiàng)目結(jié)構(gòu)：

CLI搭建項(xiàng)目結(jié)構(gòu)：

CLI方式搭建uniapp項(xiàng)目：

vue create -p dcloudio/uni-preset-vue my-test

大家可以看下兩種方式搭建的項(xiàng)目文件夾目錄有什么區(qū)別，上面的是HbuilderX模版搭建的小程序項(xiàng)目，下面的是cli搭建的項(xiàng)目，先把my-test項(xiàng)目中src下面的文件全部刪除，然后我把小程序代碼全部塞進(jìn)了src文件夾下就可以。
package.json文件內(nèi)容：

script中已經(jīng)提前幫我們配置好了，你需要什么環(huán)境也可以自己再配，方便快捷，看著眼前一亮。沒想到真正跑起來發(fā)現(xiàn)缺少了很多依賴包，按照提示，一個(gè)一個(gè)全部裝一遍。在這期間，大家也許會(huì)遇到一個(gè)node-sass報(bào)錯(cuò)，就像這樣：incompatible with ^4.0.0，這是因?yàn)閚ode-sass兼容問題，解決方法：

npm uninstall node-sass
npm install node-sass@4.14.1

好了，下圖是裝完所有提示的依賴包后的package.json

這時(shí)在運(yùn)行npm run serve，發(fā)現(xiàn)可以了，在瀏覽器打開，一片空白，納尼？趕緊看下控制臺(tái)，真兇出現(xiàn)：

這個(gè)東西我在網(wǎng)上也大面積搜了一下，國(guó)內(nèi)的好像沒什么人遇到過，國(guó)外的遇到了但是也沒提出什么有效的解決辦法。核心問題：Uncaught TypeError: _interopRequireDefault is not a function。這玩意一看就是編譯后的代碼，點(diǎn)擊打開看一下，是這樣的：

_interopRequireDefault這個(gè)function找不到了，于是看它的引入文件里面有沒有，在node_models里面找的時(shí)候發(fā)現(xiàn)了一個(gè)詭異現(xiàn)象，@babel_runtime這個(gè)包自動(dòng)裝了兩個(gè)版本，但是之前在package.json中明明只寫了一個(gè)版本，大家可以看前面的截圖，@babel_runtime的版本號(hào)是7.12.0。

先不管了，看看里面再說。順藤摸瓜，我們需要找的是這個(gè)路徑：

找到對(duì)應(yīng)的js文件后，是這樣的：

可以看到，最關(guān)鍵的default，被放在了條件判斷里面返回，也就是說，在這里肯定因?yàn)槟硞€(gè)原因，在編譯的時(shí)候，并沒有返回default，就導(dǎo)致了頁(yè)面里引入的時(shí)候?qū)嶋H上就引入了underfined。
好的好的，到這里，問題的源頭找到了，但是怎么解決呢？你是不是想在這里強(qiáng)制給它返回一個(gè)default？哈哈哈，最好不要這樣，因?yàn)槟氵@樣的話是動(dòng)了是你本地的依賴包的代碼，即使在你的電腦這個(gè)問題解決了，以后別人看到打開這個(gè)代碼，再跑起來還是會(huì)遇到一模一樣的問題，需要想一個(gè)萬(wàn)全之策，徹底解決這個(gè)問題。
這時(shí)候，領(lǐng)導(dǎo)過來了，他提供了一個(gè)思路，換一個(gè)依賴包看看，不同依賴包之前會(huì)有些微小的差別，需要細(xì)心去找。我想起了之前看到的兩個(gè)版本的@babel_runtime包，趕緊沿著相同的路徑去找下另外一個(gè)包，看看有沒有default，截圖如下：

的確和之前的版本不一樣，但是我也看不懂，只能切換下版本試一下看看，于是將package.json中的@babel_runtime版本切換到7.14.8，刪掉node_models，重新npm install、npm run serve，成功！！沒有報(bào)錯(cuò)！搞定！！
在成功運(yùn)行的那一刻我還是很震驚的，當(dāng)場(chǎng)就表示我要把這次改bug的經(jīng)歷寫下來，發(fā)出來，因?yàn)檫@種事情有時(shí)候真的是沒有思路，完全不知道該從哪里著手，而且這次小程序原地改版h5是以前沒有嘗試過的，中間過程切換了構(gòu)建模式，又解決了巨多的依賴報(bào)錯(cuò)，還設(shè)置了各種自動(dòng)化打包配置，在成功之前的每一步都是很絕望的在改，不知道后面還有多少bug在等著，這里也要特別感謝領(lǐng)導(dǎo)的關(guān)鍵支持，十分精準(zhǔn)。
好啦，目前就這么多，h5現(xiàn)在已經(jīng)完全自動(dòng)化部署了，小程序也支持運(yùn)行，一套代碼，兩端運(yùn)行，搞定!文章來源地址http://www.zghlxwxcb.cn/news/detail-596556.html

到了這里，關(guān)于uniapp使用cli腳手架創(chuàng)建兼容小程序和h5的項(xiàng)目 自動(dòng)化命令打包運(yùn)行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！