vue项目打包成app的心路历程

vue只是渣渣的我，应公司要求，打包成app,以下是我的记录

1.首先在官网（https://www.dcloud.io/）上下载Huilder，下载好之后准备以下事情：

 （1）将自己的项目进行打包 执行npm run  build会看到在项目目录文件夹中生成了一个dist文件夹。

    

（2）然后用Huilder打开该文件夹，

    

（3）在项目名称上右键选择 转换成移动APP

在HB中打开这个music，可以看到有一个manifest.json的文件。这个文件是用来配置应用信息的。入口文件一定要对应好，我用VUE写的单页应用，所以就一个index.html。

appid是要申请一个Hbuilder用户，然后登录再点击获取即可（如果提前已经登录上，应该会自动生成）

这里我勾选了debug模式（后边有介绍），实际上线不要勾选

配置好manifest.json文件之后，右键项目，点击发行--》云打包-打原生安装包

然后出现如下界面

这里需要按照如下步骤申请一个证书 ，具体参考 https://ask.dcloud.net.cn/article/35777

然后到此为止就已经有证书了，具体证书的位置就在D盘下面：

然后打包就可以。打包完之后

然后再手机上进行安装一下安装包

但是会发现打开安装包之后会出现白屏，查阅资料：

修改以下地方：

注意是publicPath,而不是baseUrl （vue-cli 3.3版本之后baseUrl已经废弃）

也要将router文件中的index.js文件中mode由history改为hash 

修改完成之后重新打包生成新的dist文件夹，然后重新发行--》点击发行--》云打包-打原生安装包下载安装包，就可以看见打开app不是空白页面了