現在基于vue全家桶技術體系，基本上可以開發各端的各種應用，pc端的應用，開發完成以后，直接運行打包命令 yarn build 即可打包，部署到服務器端上線即可。那么，今天我們來聊一聊，開發好的vue移動端應用，如何打包成app，安裝在自己的手機上呢？
首先，基于vue開發的應用，現在主流的是使用vue/cli的4.x版本搭建的項目，從vue-cli的3.x版本以后，如何修改vue的項目配置呢？過程和步驟如下。
我們需要在項目根目錄下創建一個vue.confing.js文件，項目目錄如下
- 在vue.config.js中，我們就可以寫很多webpack配置，常用的有: 配置端口號，配置跨域服務器代理等。我們需要的主要是配置一個打包的目錄publicPath,否則打包出來的apk文件，安裝在安卓手機上，可能出現白屏，具體配置如下:
module.exports = {
devServer: {
port: "6868", // 配置開發服務器的端口號（打包可以無需配置）
// 配置跨域代理(也可以使用CROS解決跨域)
proxy: {
"/ api": {
},
target: "http://192.168.1.1:4343", // 目標服務器地址
ws: true, // 是否代理websocket
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": '' // url重寫
}
}
},
publicPath: "./" // 需要配置 否則打包后的apk文件安裝在手機可能白屏
}
- 配置好了以后，從項目目錄進入終端，運行打包命令即可
- 打包完成以后，項目根目錄下，會多出一個dist目錄，內容如下：
經歷以上步驟，我們的vue項目就已經打包完成了，接下來，需要借助一個工具hbuilderX，把我們的項目打包為android端的apk文件，具體步驟如下：
一、首先，去官網下載hbuildX，下載地址為: https://www.dcloud.io/hbuilderx.html. 選擇自己的環境，下載對應的版本即可，下載完成直接解壓，打開HbuildX.
啟動后界面如下：
- 啟動界面的左下角有一個登錄按鈕，點擊登錄，如果沒有賬號的話，顯注冊一個賬號在登錄，登錄完成以后，左下角會有自己的賬號名稱。
- 然后，選擇新建、項目，創建一個5 App項目，項目名稱和路徑自己選擇即可。
- 創建出來的項目目錄和目錄說明如下，把之前打包好的dist目錄內容復制粘貼過來，直接選擇覆蓋即可。
以上步驟完成以后，接下來所有工作準備就緒，只剩下打包了，具體打包步驟如下：
- 打開manifest.json，配置核心重要的幾個選項，具體配置如下：
生成的圖標在unpackage目錄下面的res目錄中
- 選擇發行=》原生App云打包=>然后選擇打android的包，有ios的證書也可以打包為ios，android可以用免費的公用證書，開發者直接使用即可，具體選擇如下，然后接下來等待即可。
- 稍微等待之后，打包成功之后，會返回apk下載文件的下載鏈接，點擊鏈接，把apk文件下載下來，然后發送到自己的android手機，安裝在自己的手機上即可。
經歷過以上的步驟，我們就可以在自己的手機上體驗自己開發的app了，大家可以按照步驟來試一試，把自己開發的app安裝在自己的手機上，使用起來吧。
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。