基於Vue的專案打包為移動端app

2022-06-14 14:54:08 字數 1402 閱讀 1709

首先,基於vue開發的應用,現在主流的是使用vue/cli的4.x版本搭建的專案,從vue-cli的3.x版本以後,如何修改vue的專案配置呢?過程和步驟如下。

我們需要在專案根目錄下建立乙個vue.confing.js檔案,專案目錄如下

在vue.config.js中,我們就可以寫很多webpack配置,常用的有: 配置埠號,配置跨域伺服器**等。我們需要的主要是配置乙個打包的目錄publicpath,否則打包出來的apk檔案,安裝在安卓手機上,可能出現白屏,具體配置如下:

配置好了以後,從專案目錄進入終端,執行打包命令即可

打包完成以後,專案根目錄下,會多出乙個dist目錄,內容如下:

經歷以上步驟,我們的vue專案就已經打包完成了,接下來,需要借助乙個工具hbuilderx,把我們的專案打包為android端的apk檔案,具體步驟如下:

啟動後介面如下:

啟動介面的左下角有乙個登入按鈕,點選登入,如果沒有賬號的話,顯註冊乙個賬號在登入,登入完成以後,左下角會有自己的賬號名稱。

建立出來的專案目錄和目錄說明如下,把之前打包好的dist目錄內容複製貼上過來,直接選擇覆蓋即可。

以上步驟完成以後,接下來所有工作準備就緒,只剩下打包了,具體打包步驟如下:

開啟manifest.json,配置核心重要的幾個選項,具體配置如下:

生成的圖示在unpackage目錄下面的res目錄中

Vue 基於nodejs的vue專案打包編譯部署

1 進入專案目錄下的終端執行命令 npm run build 正常情況如下圖,如遇到錯誤不會編譯成功,且編譯後的html檔案不能正常渲染。2 編譯完成後進入專案下的 dist 目錄執行生成的 index.html檔案 開啟以後f12出現以下錯誤 資源檔案未找到 開啟專案中的index.js檔案修改 ...

基於Vue 的常用移動端框架

1 vux 中文文件 2 mint ui github位址 中文文件 mint ui由餓了麼前端團隊推出,是乙個基於vue.js的移動端元件庫,包含豐富的 css 和 js 元件,能夠滿足日常的移動端開發需要。通過它,可以快速構建風格統一的頁面,提公升開發效率。3 mui github位址 中文文件...

VUE專案測試,移動端

vue專案,進行移動端測試操作步驟 1 執行專案 npm run dev2 電腦建立熱點 3 手機連線熱點,通過本地ip 訪問專案 查詢本地網域名稱 1 windows r 輸入 cmd 2 輸入 ipconfig 3 ipv4 位址 就是ip位址了 4 發現報錯,無法訪問 5 解決 方法一 找到檔...