Preface
Some time ago I wrote an article about using Hbuilder to package the front-end website as a WebApp (Android, ios application). I
received many private messages from front-end partners, asking me if I can write an article on how to package a project developed by Vue into an android, ios application, then bring it today Everyone walks through how to package the project developed by vue, and then how to publish it as an android, ios installer and install it on your mobile phone.
How to package the project built by vue-cli4
Based on the application developed by vue, the mainstream is now the project built using the 4.x version of vue/cli. From the 3.x version of vue-cli, how to modify the project configuration of vue?
1. Create vue.config.js
First, we need to create a vue.confing.jsfile in the project root directory , the project directory is as follows
2. Webpack configuration
In vue.config.js, we can write a lot of webpack configurations, the commonly used ones are: configuring port numbers, configuring cross-domain server proxy, etc. What we need is mainly to configure a packaged directory publicPath, otherwise the packaged apk file may appear white screen when installed on an Android phone. The specific configuration is as follows:
module.exports = {
publicPath: "./",// 需要配置 否则打包后的apk文件安装在手机可能白屏
devServer: {
port: "6868", // 配置开发服务器的端口号（打包可以无需配置）
// 配置跨域代理(也可以使用CROS解决跨域)
proxy: {
"/ api": {
target: "http://192.168.1.1:4343", // 目标服务器地址
ws: true, // 是否代理websocket
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/api": '' // url重写
}
}
},
}
3. Npm run build or yarn run build packaging
After the packaging is completed, there will be an additional dist directory under the project root directory, with the content as follows: After the
above steps, our vue project has been packaged. Next, we need to use a tool hbuilderX to package our project as an android side apk file
How does the dist packaged by vue become an android and ios application
First, go to the official website to download hbuildX. The download address is: https://www.dcloud.io/hbuilderx.html. Choose your own environment and download the corresponding version. After the download is complete, unzip it and open HbuildX
The interface after startup is as follows:
there is a login button in the lower left corner of the startup interface, click to log in. If you don't have an account, it will show that you have registered an account to log in. After the login is completed, your account name will appear in the lower left corner.
Then, select New, Project, and create a 5+App project. You can choose the project name and path by yourself.
The created project directory and directory description are as follows, copy and paste the contents of the previously packaged dist directory, and just select overwrite.
After the above steps are completed, all the next work is ready, only packaging is left. The specific packaging steps are as follows:
Open manifest.json and configure several important core options. The specific configuration is as follows: The
generated icon is
selected in the res directory under the unpackage directory to publish = "Native App Cloud Packaging => Then select the Android package, and there is also an ios certificate It can be packaged as ios, and android can use free public certificates. Developers can use them directly. The specific options are as follows, and then wait.
After a while, after the packaging is successful, it will return to the download link of the apk download file, click the link, download the apk file, and then send it to your android phone and install it on your phone. 
After going through the above steps, we can experience the app developed by ourselves on our mobile phone. You can follow the steps to try it out. Install the app developed by yourself on your mobile phone and use it.