使用HBuilderX 打包 vue 项目 为 App 的步骤

这里，我的项目是vue-cli构建的工程，h5移动端页面。

由于开发成本并没有用安卓或ios原生语言来开发app，而是选择将现有项目直接打包。

下面我会分享一下HBuilderX 打包 vue 项目 为 App 的步骤。希望对有需求的同学提供帮助。

原vue项目打包dist文件

1、首先以及必须，将config文件夹里的index.js文件中assetsPublicPath由'/'改为 './'。

2、修改build文件下的utils.js文件加如下图publicPath:'../../'路径，是为了显示css中背景图片。

这个曾经是我遇到的一个坑，很多文章说publicPath:'./'，这会造成背景图片不显示的问题，所以这里一定要改成publicPath:'../../'。

3、修改build文件下的webpack.prod.conf.js文件output中加如下图publicPath:'./'路径

4、npm run build 打包生成dist文件 。

使用HBuiderX

1、选择项目->新建->项目，选择5+APP