現在基於vue全家桶技術體系，基本上可以開發各端的各種應用，pc端的應用，開發完成以後，直接執行打包命令 yarn build 即可打包，部署到伺服器端上線即可。那麼，今天我們來聊一聊，開發好的vue移動端應用，如何打包成app，安裝在自己的手機上呢？

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

在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檔案安裝在手機可能白屏

}

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

經歷以上步驟，我們的vue專案就已經打包完成了，接下來，需要藉助一個工具hbuilderX，把我們的專案打包為android端的apk檔案，具體步驟如下：

一、首先，去官網下載hbuildX，下載地址為: https://www.dcloud.io/hbuilderx.html. 選擇自己的環境，下載對應的版本即可，下載完成直接解壓，開啟HbuildX.

啟動後介面如下：

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

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

選擇發行=》原生App雲打包=>然後選擇打android的包，有ios的證書也可以打包為ios，android可以用免費的公用證書，開發者直接使用即可，具體選擇如下，然後接下來等待即可。

經歷過以上的步驟，我們就可以在自己的手機上體驗自己開發的app了，大家可以按照步驟來試一試，把自己開發的app安裝在自己的手機上，使用起來吧。