基于Vue的项⽬打包为移动端app
现在基于vue全家桶技术体系，基本上可以开发各端的各种应⽤，pc端的应⽤，开发完成以后，直接运⾏打包命令 yarn build 即可打包，部署到服务器端上线即可。那么，今天我们来聊⼀聊，开发好的vue移动端应⽤，如何打包成app，安装在⾃⼰的⼿机上呢？
⾸先，基于vue开发的应⽤，现在主流的是使⽤vue/cli的4.x版本搭建的项⽬，从vue-cli的3.x版本以后，如何修改vue的项⽬配置呢？过程和步骤如下。
我们需要在项⽬根⽬录下创建⼀个fing.js⽂件，项⽬⽬录如下
在fig.js中，我们就可以写很多webpack配置，常⽤的有: 配置端⼝号，配置跨域服务器代理等。我们需要的主要是配置⼀个打包的⽬录publicPath，否则打包出来的apk⽂件，安装在安卓⼿机上，可能出现⽩屏，具体配置如下:
devServer: {
port: "6868", // 配置开发服务器的端⼝号（打包可以⽆需配置）
// 配置跨域代理(也可以使⽤CROS解决跨域)
proxy: {
原生安卓app开发
"/ api": {
},
target: "192.168.1.1:4343", // ⽬标服务器地址
ws: true, // 是否代理websocket
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": '' // url重写
}
}
},
publicPath: "./" // 需要配置否则打包后的apk⽂件安装在⼿机可能⽩屏
}
配置好了以后，从项⽬⽬录进⼊终端，运⾏打包命令即可
打包完成以后，项⽬根⽬录下，会多出⼀个dist⽬录，内容如下：
经历以上步骤，我们的vue项⽬就已经打包完成了，接下来，需要借助⼀个⼯具hbuilderX，把我们的项⽬打包为android端的apk⽂件，具体步骤如下：
启动后界⾯如下：
启动界⾯的左下⾓有⼀个登录按钮，点击登录，如果没有账号的话，显注册⼀个账号在登录，登录完成以后，左下⾓会有⾃⼰的账号名称。
然后，选择新建、项⽬，创建⼀个5+App项⽬，项⽬名称和路径⾃⼰选择即可。
创建出来的项⽬⽬录和⽬录说明如下，把之前打包好的dist⽬录内容复制粘贴过来，直接选择覆盖即可。
以上步骤完成以后，接下来所有⼯作准备就绪，只剩下打包了，具体打包步骤如下：
打开manifest.json，配置核⼼重要的⼏个选项，具体配置如下：
⽣成的图标在unpackage⽬录下⾯的res⽬录中
选择发⾏=》原⽣App云打包=>然后选择打android的包，有ios的证书也可以打包为ios，android可以⽤免费的公⽤证书，开发者直接使⽤即可，具体选择如下，然后接下来等待即可。
稍微等待之后，打包成功之后，会返回apk下载⽂件的下载链接，点击链接，把apk⽂件下载下来，然后发送到⾃⼰的android⼿机，安装在⾃⼰的⼿机上即可。
经历过以上的步骤，我们就可以在⾃⼰的⼿机上体验⾃⼰开发的app了，⼤家可以按照步骤来试⼀试，把⾃⼰开发的app安装在⾃⼰的⼿机上，使⽤起来吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。