本文僅演示的是打包成android 版本的apk

一、打包vue3項(xiàng)目

1、打包

通過(guò)打包命令將vue3項(xiàng)目打包成一個(gè)dist文件夾

注意：一般的打包命令為npm run build,特殊設(shè)置的修改一下打包命令 

2、解決打包后的文件的白屏問(wèn)題。

有時(shí)打包后的文件運(yùn)行出現(xiàn)白屏問(wèn)題，可能是絕對(duì)路徑導(dǎo)致的，在vite.config.js文件中配置base:'./'

 圖一  解決白屏問(wèn)題

二、打包成apk

1、創(chuàng)建“5+App”項(xiàng)目

     在hbuilderx 中新建項(xiàng)目,選擇“5+App”,然后填寫(xiě)項(xiàng)目名稱,點(diǎn)擊底部的"創(chuàng)建"按鈕,步驟如下圖：

圖二  創(chuàng)建 5+app項(xiàng)目

2、打包文件移動(dòng)

  將打包的dist中的文件全部復(fù)制到新建圖一的根目錄中

3、生成apk文件

點(diǎn)擊頂部 "發(fā)行"，選擇 "原生App-云打包"，具體內(nèi)容如下，之后靜靜等待打包成apk

 圖三  打包apk 步驟

三、生成apk

生成apk文件，然后將apk文件安裝到手機(jī)上進(jìn)行運(yùn)行，測(cè)試一下運(yùn)行結(jié)果

附：vue項(xiàng)目打包時(shí)報(bào)錯(cuò)，該如何解決？

要解決這個(gè)問(wèn)題，您需要了解出現(xiàn)了哪些具體錯(cuò)誤。以下是一些常見(jiàn)的 Vue 打包錯(cuò)誤和如何解決的建議：

1. Module not found 錯(cuò)誤：這通常表示您的代碼中引用了不存在的模塊。檢查您的依賴項(xiàng)和代碼，確保您引用了正確的模塊。此外，如果您使用相對(duì)路徑引用模塊，嘗試使用絕對(duì)路徑引用它們。

2. Unexpected token 錯(cuò)誤：這通常表示您的代碼中有語(yǔ)法錯(cuò)誤。檢查代碼以尋找未關(guān)閉的括號(hào)、分號(hào)等錯(cuò)誤。您還可以使用 Lint 工具檢查代碼以及編輯器插件來(lái)幫助避免語(yǔ)法錯(cuò)誤。

3. Cannot read property 'someProperty' of undefined 錯(cuò)誤：這通常表示您的代碼嘗試訪問(wèn)未定義的屬性。確保您正在訪問(wèn)正確的屬性，并確保該屬性已定義并可用。

4. Maximum call stack size exceeded 錯(cuò)誤：這通常表示您的代碼中存在循環(huán)引用或無(wú)限遞歸。確保您的代碼不會(huì)無(wú)限遞歸調(diào)用相同的函數(shù)或?qū)ο蟆?/p>

5. Failed to load resource: the server responded with a status of 404 (Not Found) 錯(cuò)誤：這通常表示您嘗試加載不存在的文件或資源。確保您正確地引用了文件或資源，并確保您的服務(wù)器正在正確地提供它們。

6. SyntaxError: Unexpected token < in JSON at position 0 錯(cuò)誤：這通常表示您嘗試解析不正確的 JSON 數(shù)據(jù)。檢查您的 JSON 數(shù)據(jù)以查找語(yǔ)法錯(cuò)誤，并確保您使用 JSON.parse() 將其正確解析。

總結(jié)

到此這篇關(guān)于vue3項(xiàng)目打包成apk(android)的文章就介紹到這了,更多相關(guān)vue3打包成apk內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論