注意标题，本文全程基于HbuilderX。
其次，应注意开发的vue项目本身使用技术等能够适应APP运行环境，特别是UI界面。
还有，不要问为什么不用 Android 开发 APP 等问题，问就是懒。也不要问为啥不用 VSCode，问就是我都用。
另外，理论上应该不止这一个路子，其他方式不在本文讨论范围。
1. VUE项目运行 npm run build 得到dist文件夹
dist文件夹内容示例：
2. HbuilderX中创建空的5+APP项目
3. 将vue项目中dist文件夹下的内容全部拷贝粘贴到刚刚创建的5+APP项目文件夹下（重复的就直接覆盖）
空的5+APP项目文件夹情况：
将dist文件夹下的内容粘贴（并覆盖）到5+APP下后：
4. 将现在的5+APP项目进行打包/直接运行到模拟器上进行测试
打包方式：
选中5+APP项目
点击最上面的菜单栏的“发行”
选择你要进行的打包方式进行打包
5. 注意，打包前一定要调整manifest.json（打包成APP的配置文件）
在打包页面可以看到：
这里一般是根据你自己的具体项目需求来定，例如是否要调用摄像头之类的
6.ok
注意
vue.config.js 文件下可以这么写：
module.exports = {
publicPath: './' , // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
configureWebpack: {
//警告 webpack 的性能提示
performance: {
hints:'warning', // 枚举
//入口起点的最大体积,整数类型（以字节为单位）
maxEntrypointSize: 50000000,
//生成文件的最大体积,整数类型（以字节为单位）
maxAssetSize: 30000000,
//只给出 js 文件的性能提示, 提供资源文件名的断言函数
assetFilter: function(assetFilename) {
return assetFilename.endsWith('.js') || assetFilename.endsWith('.css')
}
}
}
}
其中：
1.
publicPath: 解决打包后显示是白屏的问题
vue-cli 2.x 的话，是修改 config 文件夹下的 build 的 assetsPublicPath:'./'
2.
configureWebpack: 解决webpack在打包时报文件体积太大的错误
不然 npm run build 时出现 asset size limit: .... 警告
错误原因：资源(asset)和入口起点超过指定文件限制
3.
要在原来的vue项目上修改，修改后要重新进行上述从1到6的步骤。