如何将基于Vue的手机移动端开发项目进行APP项目打包?

12 篇文章 0 订阅

1.找到项目文件夹
新建vue.config.js(新建文件与package.json同级)

module.exports = {
    publicPath:'/',
    outputDir:'dist',
    assetsDir:'static'
}

2.打开项目router文件夹底下的index.js
        在文件内容最底下位置部分的mode:'history'改成 mode:'hash'

注意 两种路由方式:hashhistory的区别
1)url的显示
        hash             /#/
        history         没有#
2)回车刷新
        hash         可以加载到对应的页面
        history       一般会跳转到404页面(找不到原网页)
3)支持版本
        hash         支持低版本的浏览器,包括低版本的IE浏览器
        history       兼容性不好,有些浏览器不支持

3.npm run build打包项目
在终端输入命令进行项目的打包,打包完成出来dist文件夹

注意:打包完后需要自己在本地打开页面测试是否可以直接打开显示页面内容

4.再新建一个文件夹用于自己即将打包的APP项目存放位置

        进入要新建文件夹目录的cmd终端,输入以下命令:

cordova create xxx(打包项目名称)

        进入上面用cordova新建的打包的xxx文件夹底下,为项目添加平台(一定要注意是否在cordova新建的文件夹项目中)

cordova platform  add android --save  

        再进入前面Vue项目打包出来的dist文件夹下,将里面的内容移到之前用cordova新建的文件夹底下的www文件夹下。
注意: 在移动前需要删除原有cordova新建项目底下的www文件夹底下的内容)
        确认打包环境无误后,回到cordova建立的打包项目文件夹底下开始打包

 cordova build android

        打包成功后在终端显示地方会提示自己打包的一个路径

 Build the following apk(s):
            xxxxxx(打包文件所在的路径位置)

        再根据这个路径进入这个路径就能找到打包出来的app了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值