vue脚手架项目打包成app_Vue cli3+Hubuilder将项目打包为App

前言

现在跨平台的开发越发的火了起来。前端能做到的事情也越来越多，App再也不用完全依靠安卓原生开发了。现在开发app的方式都是内核是前端开发，然后再给项目套一个安卓的外壳，即可实现app的开发。

Vue开发app如何打包？

现在最新的脚手架为Vue-cli3,构建出来的项目结构十分明了简单。配置文件只需一个Vue.config.js即可搞定。

先到Vue.config.js里面添加：

``` JS

module.exports = {

// 选项...,

baseUrl: './',

devServer: {

port: 8080, // 端口号

host: 'localhost',

https: false, // https:{type:Boolean}

open: true, //配置自动启动浏览器

// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理

proxy: {

'/api': {

target: '',//后端接口地址

ws: true,

changeOrigin: true,//是否允许跨域

pathRewrite: {

'^/api': '' //直接用'api/接口名'进行请求.

}

}

} // 配置多个代理

},

};

```

复制代码

将baseUrl改为'./'

然后用webpack将项目打包为dist文件.

打开Huilder

点击打开目录

找到刚刚的dist文件夹，取好项目名称。

右点击项目，将项目转换为App

然后进行mainfest文件配置，制作app图标和启动页

点击进行云打包进行打包

然后下载打包好之后的.apk文件即可。