Prefacio
Hace algún tiempo escribí un artículo sobre el uso de Hbuilder para empaquetar el sitio web front-end como una aplicación web (aplicación Android, ios).
Recibí muchos mensajes privados de socios front-end y me pregunté si podía escribir un artículo sobre cómo empaquetar un proyecto desarrollado por Vue en una aplicación ios para Android, y luego presentarlo hoy Todos explican cómo empaquetar el proyecto desarrollado por vue, y luego cómo publicarlo como un instalador de Android e iOS e instalarlo en su teléfono móvil.
Cómo empaquetar el proyecto construido por vue-cli4
Basado en la aplicación desarrollada por vue, la corriente principal es ahora el proyecto construido usando la versión 4.x de vue / cli. Desde la versión 3.x de vue-cli, ¿cómo modificar la configuración del proyecto de vue?
1. Cree vue.config.js
Primero, necesitamos crear un vue.confing.jsarchivo en el directorio raíz del proyecto, el directorio del proyecto es el siguiente
2. Configuración del paquete web
En vue.config.js, podemos escribir una gran cantidad de configuraciones de paquetes web, las más utilizadas son: configurar números de puerto, configurar proxy de servidor entre dominios, etc. Lo que necesitamos es principalmente configurar un directorio empaquetado publicPath, de lo contrario el archivo apk empaquetado puede aparecer en pantalla blanca cuando se instala en un teléfono Android. La configuración específica es la siguiente:
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. Empaquetado de construcción de ejecución de ejecución Npm o construcción de ejecución de hilo
Una vez completado el empaquetado, habrá un directorio dist adicional bajo el directorio raíz del proyecto, con el contenido de la siguiente manera: Después de los
pasos anteriores, nuestro proyecto vue ha sido empaquetado. A continuación, necesitamos usar una herramienta hbuilderX para empaquetar nuestro proyecto como un lado de Android archivo apk
¿Cómo se convierte el dist empaquetado por vue en una aplicación para Android e iOS?
Primero, vaya al sitio web oficial para descargar hbuildX. La dirección de descarga es: https://www.dcloud.io/hbuilderx.html. Elija su propio entorno y descargue la versión correspondiente. Una vez completada la descarga, descomprímalo y abra HbuildX
La interfaz después del inicio es la siguiente:
hay un botón de inicio de sesión en la esquina inferior izquierda de la interfaz de inicio, haga clic para iniciar sesión. Si no tiene una cuenta, se mostrará que ha registrado una cuenta para iniciar sesión. Una vez completado el inicio de sesión, su nombre de cuenta aparecerá en la esquina inferior izquierda.
Luego, seleccione Nuevo, Proyecto y cree un proyecto de 5 + App. Puede elegir el nombre del proyecto y la ruta usted mismo.
El directorio del proyecto creado y el directorio se describen a continuación, copie y pegue el contenido del directorio dist que se ha empaquetado antes y seleccione directamente para sobrescribirlo.
Una vez completados los pasos anteriores, todo el siguiente trabajo está listo, solo queda el embalaje. Los pasos específicos del embalaje son los siguientes:
Abra manifest.json y configure varias opciones principales importantes. La configuración específica es la siguiente: El
icono generado se
selecciona en el directorio res bajo el directorio de desempaquetado para publicar = "Native App Cloud Packaging => Luego seleccione el paquete de Android, y también hay un certificado ios Se puede empaquetar como ios y Android puede usar un certificado público gratuito. Los desarrolladores pueden usarlo directamente. Las opciones específicas son las siguientes y luego espere.
Después de un tiempo, después de que el empaquetado sea exitoso, volverá al enlace de descarga del archivo de descarga apk, haga clic en el enlace, descargue el archivo apk y luego envíelo a su teléfono Android e instálelo en su teléfono. 
Después de seguir los pasos anteriores, podemos experimentar la aplicación desarrollada por nosotros mismos en nuestro teléfono móvil. Puede seguir los pasos para probarla. Instale la aplicación desarrollada por usted mismo en su teléfono móvil y utilícela.