如何利用HbuilderX将现成的vue项目打包成APP

注意标题，本文全程基于HbuilderX。

其次，应注意开发的vue项目本身使用技术等能够适应APP运行环境，特别是UI界面。

还有，不要问为什么不用Android开发APP等问题，问就是懒。也不要问为啥不用VSCode，问就是我都用。

另外，理论上应该不止这一个路子，其他方式不在本文讨论范围。

1.vue项目npm run build 得到dist文件夹

2.hbuilderX中创建空的5+APP项目

3.将vue项目中dist文件夹下的内容全部拷贝粘贴到刚刚创建的5+APP项目文件夹下（重复的就直接覆盖）

4.将现在的5+APP项目进行打包/直接运行到模拟器上进行测试

打包方式：选中5+APP项目 -》点击最上面的菜单栏的“发行” -》选择你要进行的打包方式进行打包 

5.注意，打包前一定要调整manifest.json（打包成APP的配置文件）

这里一般是根据你自己的具体项目需求来定，例如是否要调用摄像头之类的

6.ok

注意：vue.config.js文件下可以这么写：

其中：

1.

publicPath: 解决打包后显示是白屏的问题

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

2.

configureWebpack: 解决webpack在打包时报文件体积太大的错误

不然npm run build时出现asset size limit: ....警告

错误原因：资源(asset)和入口起点超过指定文件限制

3.

要在原来的vue项目上修改，修改后要重新进行上述从1到6的步骤。

参考：

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

官网config配置参考： https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

关于vue3.0打包后转app白屏显示问题解决： https://ask.dcloud.net.cn/article/35633