現(xiàn)在基于vue全家桶技術(shù)體系，基本上可以開發(fā)各端的各種應(yīng)用，pc端的應(yīng)用，開發(fā)完成以后，直接運(yùn)行打包命令 yarn build 即可打包，部署到服務(wù)器端上線即可。那么，今天我們來聊一聊，開發(fā)好的vue移動端應(yīng)用，如何打包成app，安裝在自己的手機(jī)上呢？

首先，基于vue開發(fā)的應(yīng)用，現(xiàn)在主流的是使用vue/cli的4.x版本搭建的項(xiàng)目，從vue-cli的3.x版本以后，如何修改vue的項(xiàng)目配置呢？過程和步驟如下。

我們需要在項(xiàng)目根目錄下創(chuàng)建一個(gè)vue.confing.js文件，項(xiàng)目目錄如下

• 在vue.config.js中，我們就可以寫很多webpack配置，常用的有: 配置端口號，配置跨域服務(wù)器代理等。我們需要的主要是配置一個(gè)打包的目錄publicPath,否則打包出來的apk文件，安裝在安卓手機(jī)上，可能出現(xiàn)白屏，具體配置如下:

module.exports = {

devServer: {

port: "6868", // 配置開發(fā)服務(wù)器的端口號（打包可以無需配置）

// 配置跨域代理(也可以使用CROS解決跨域)

proxy: {

"/ api": {

},

target: "http://192.168.1.1:4343", // 目標(biāo)服務(wù)器地址

ws: true, // 是否代理websocket

changeOrigin: true, // 是否跨域

pathRewrite: {

"^/api": '' // url重寫

}

}

},

publicPath: "./" // 需要配置 否則打包后的apk文件安裝在手機(jī)可能白屏

}

• 配置好了以后，從項(xiàng)目目錄進(jìn)入終端，運(yùn)行打包命令即可

• 打包完成以后，項(xiàng)目根目錄下，會多出一個(gè)dist目錄，內(nèi)容如下：

經(jīng)歷以上步驟，我們的vue項(xiàng)目就已經(jīng)打包完成了，接下來，需要借助一個(gè)工具h(yuǎn)builderX，把我們的項(xiàng)目打包為android端的apk文件，具體步驟如下：

一、首先，去官網(wǎng)下載hbuildX，下載地址為: https://www.dcloud.io/hbuilderx.html. 選擇自己的環(huán)境，下載對應(yīng)的版本即可，下載完成直接解壓，打開HbuildX.

啟動后界面如下：

• 啟動界面的左下角有一個(gè)登錄按鈕，點(diǎn)擊登錄，如果沒有賬號的話，顯注冊一個(gè)賬號在登錄，登錄完成以后，左下角會有自己的賬號名稱。

• 然后，選擇新建、項(xiàng)目，創(chuàng)建一個(gè)5 App項(xiàng)目，項(xiàng)目名稱和路徑自己選擇即可。

• 創(chuàng)建出來的項(xiàng)目目錄和目錄說明如下，把之前打包好的dist目錄內(nèi)容復(fù)制粘貼過來，直接選擇覆蓋即可。

以上步驟完成以后，接下來所有工作準(zhǔn)備就緒，只剩下打包了，具體打包步驟如下：

• 打開manifest.json，配置核心重要的幾個(gè)選項(xiàng)，具體配置如下：

生成的圖標(biāo)在unpackage目錄下面的res目錄中

• 選擇發(fā)行=》原生App云打包=>然后選擇打android的包，有ios的證書也可以打包為ios，android可以用免費(fèi)的公用證書，開發(fā)者直接使用即可，具體選擇如下，然后接下來等待即可。

• 稍微等待之后，打包成功之后，會返回apk下載文件的下載鏈接，點(diǎn)擊鏈接，把a(bǔ)pk文件下載下來，然后發(fā)送到自己的android手機(jī)，安裝在自己的手機(jī)上即可。

經(jīng)歷過以上的步驟，我們就可以在自己的手機(jī)上體驗(yàn)自己開發(fā)的app了，大家可以按照步驟來試一試，把自己開發(fā)的app安裝在自己的手機(jī)上，使用起來吧。