注意標(biāo)題，本文全程基于HbuilderX。

其次，應(yīng)注意開發(fā)的vue項(xiàng)目本身使用技術(shù)等能夠適應(yīng)APP運(yùn)行環(huán)境，特別是UI界面。

還有，不要問為什么不用Android開發(fā)APP等問題，問就是懶。也不要問為啥不用VSCode，問就是我都用。

另外，理論上應(yīng)該不止這一個(gè)路子，其他方式不在本文討論范圍。

1.vue項(xiàng)目npm run build 得到dist文件夾

2.hbuilderX中創(chuàng)建空的5+APP項(xiàng)目

3.將vue項(xiàng)目中dist文件夾下的內(nèi)容全部拷貝粘貼到剛剛創(chuàng)建的5+APP項(xiàng)目文件夾下（重復(fù)的就直接覆蓋）

4.將現(xiàn)在的5+APP項(xiàng)目進(jìn)行打包/直接運(yùn)行到模擬器上進(jìn)行測(cè)試

打包方式：選中5+APP項(xiàng)目 -》點(diǎn)擊最上面的菜單欄的“發(fā)行” -》選擇你要進(jìn)行的打包方式進(jìn)行打包?

5.注意，打包前一定要調(diào)整manifest.json（打包成APP的配置文件）

這里一般是根據(jù)你自己的具體項(xiàng)目需求來定，例如是否要調(diào)用攝像頭之類的

6.ok

注意：vue.config.js文件下可以這么寫：

其中：

1.

publicPath: 解決打包后顯示是白屏的問題

vue-cli 2.x的話，是修改config文件夾下的build的assetsPublicPath:'./'

2.

configureWebpack: 解決webpack在打包時(shí)報(bào)文件體積太大的錯(cuò)誤

不然npm run build時(shí)出現(xiàn)asset size limit: ....警告

錯(cuò)誤原因：資源(asset)和入口起點(diǎn)超過指定文件限制

3.

要在原來的vue項(xiàng)目上修改，修改后要重新進(jìn)行上述從1到6的步驟。

參考：

vue-cli 3.x 如何配置assetsPublicPath：?https://blog.csdn.net/wakaka112233/article/details/106101146

官網(wǎng)config配置參考：?https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

關(guān)于vue3.0打包后轉(zhuǎn)app白屏顯示問題解決：?https://ask.dcloud.net.cn/article/35633