vue 專案打包成apk(Hbuilder方案)
一:使用webstorm建立vue專案
二:build專案生成dist檔案
執行npm run dev 後開啟連結可看到介面說明專案初始化正常,
然後編輯build命令
點選綠色三角形執行執行npm run build,生成dist目錄及相關檔案:
生成的結構如下:
然後用瀏覽器開啟dist 資料夾中的index.html檔案驗證build是否正常,如果空白說明失敗:
解決方法:
開啟config/index.js檔案,將build標籤下的將 assetsPublicPath: ‘/’ 修改為 assetsPublicPath: ‘./’ 即新增一個點,如下:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
正常後的介面應該和npm run dev執行的介面相同。
三:使用hbuilder構建APP
注意:推薦下載使用紅色圖示的Hbuilder,我是在360軟體管家裡面下載的
版本號:
VERSION 9.0.4
BUILD .201805232049
匯入剛才生成的dist資料夾,此時會看到HBuilder專案下多了一個W標識(表示web專案)的專案,
右鍵選單選擇‘轉換成移動‘轉換成移動App’,然後‘myApp’前面的標識就變成了‘A’,至此就已經轉換成移動app了,
生成app,資料夾會多一個manifest.json檔案,
隨後就可以利用HBuilder連線真機執行或者發行成為原生app。
相關文章
- 使用HBuilder將web專案打包成appUIWebAPP
- uni-app專案打包成apk(本地打包篇)APPAPK
- webpack + Vue + Hbuilder 打包成App,混合app開發,一個人搞定WebVueUIAPP
- Android APK打渠道包實施方案AndroidAPK
- AndroidStudio專案打包成jarAndroidJAR
- Electron系列 -- vue專案打包成.exe檔案(透過官方demo的方式)Vue
- vue 專案白屏解決方案Vue
- Android Studio打包專案:APKAndroidAPK
- Intellij Idea 將Java專案打包成jarIntelliJIdeaJavaJAR
- vue面試題之vue專案的優化方案Vue面試題優化
- Vue + Spring Boot 專案實戰(十九):Web 專案優化解決方案VueSpring BootWeb優化
- 如何把 Kitten程式設計貓上開發出來的專案打包成安卓平臺上可以安裝的apk檔案程式設計安卓APK
- webpack4打包vue前端多頁面專案WebVue前端
- uniapp打包成apk,監聽安卓手機的返回鍵APPAPK安卓
- appium 能打包成 apk,啟動這個 apk 就能調起待測 app 自動化麼APPAPK
- VUE 專案:API配置、版本控制(V1.0方案)VueAPI
- 【Vue專案總結】元件通訊處理方案Vue元件
- vue小程式專案 pdf下載解決方案Vue
- vue2專案升級至vue3方案步驟踩坑Vue
- Maven專案打jar包MavenJAR
- VUE專案Vue
- 【Vue專案總結】webpack常規打包優化方案VueWeb優化
- JavaFx專案打包成exe,並整合Jre,使Java專案在任意機器執行Java
- Flutter入門進階之旅(十八)Flutter專案打包成aar整合到原生Android專案FlutterAndroid
- Nginx部署Vue前端專案,部署多個Vue專案NginxVue前端
- Vue 框架-11-介紹src檔案流程及根元件app+HBuilder 配置Vue框架元件APPUI
- springboot專案打war包流程Spring Boot
- APK 檔案分析APK
- vue-cli3構建專案跨域解決方案Vue跨域
- vue專案配置Vue
- vue專案流程Vue
- 建立vue專案Vue
- 如何將 Python 專案打包成 exe,另帶解除安裝功能!Python
- Intellij Idea 將java專案打包成jar,cmd執行該jarIntelliJIdeaJavaJAR
- 老司機談APK瘦身套路-專案優化篇APK優化
- 【Android APK】解析SD卡上的APK檔案AndroidAPKSD卡
- Vue+Express全棧開發專案實戰技能:從0到1打造完整電商專案VueExpress全棧
- [VUE]vue3新建專案Vue