Tras completar el despliegue del backend, ahora se puede proceder con la implementación del front end. Este artículo utiliza el panel Baota como ejemplo común.

El despliegue de proyectos Vue en el panel Baota generalmente se realiza mediante dos métodos: compilar a archivos estáticos o desplegar directamente un proyecto Node.js.

Este tutorial utiliza como referencia MyAuthWeb, mantenido por TianYe.

Repositorio del frontend: https://gitee.com/fieldtianye/my-auth-web

Vista previa de MyAuthWeb versión TianYe: https://www.cnblogs.com/daen/p/16019664.html

Instrucciones

Método 1: Compilación desde la rama feature/custom, ajustando archivo de configuración

Similar al Método 3, pero en este caso las direcciones del back end se definen en un archivo de configuración, permitiendo modificarlas fácilmente tras la compilación.

El archivo serverConfig.json contiene la siguiente información:

{
  "publishRootUrl": "http://localhost:8080", // Dirección del backend en producción
  "localRootUrl": "http://localhost:8080",   // Dirección del backend para pruebas locales
  "apiTimeout": 10000,                       // Tiempo límite de las llamadas API
  "projectName": "MyAuth",                   // Nombre del proyecto
  "internetContentProvider": "浙ICP备000001号-1(伪)", // Número de registro de sitio web
  "copyright": "2022 Server By Daen | Web By Shine" // Texto de copyright inferior
}

Para más detalles, consultar el archivo README del repositorio.

Método 2: Usar el archivo precompilado my-auth-web-custom.zip del grupo oficial

Este archivo fue generado desde la rama feature/custom, facilitando su uso para quienes no tienen conocimiento sobre Node.js ni Vue.

Al descargar el paquete comprimido, se debe modificar el archivo serverConfig.json, cuyo contenido es el mismo que en el método anterior:

{
  "publishRootUrl": "http://localhost:8080",
  "localRootUrl": "http://localhost:8080",
  "apiTimeout": 10000,
  "projectName": "MyAuth",
  "internetContentProvider": "浙ICP备000001号-1(伪)",
  "copyright": "2022 Server By Daen | Web By Shine"
}

Método 3: Compilación propia desde la rama master

Prerequisitos

1. Configurar el entorno básico de Vue en tu máquina, incluyendo el CLI y Node.js.
2. Instalar yarn.

Descarga del código fuente

Desde la página del proyecto MyAuthWeb, descargue el código usando su método preferido, como ZIP o clonación con Git.

Modificación del proyecto

Abra el proyecto en VSCode u otro editor de preferencia. En este caso, usaremos VSCode.

Edite el archivo .env para actualizar la dirección del backend.

Instalación de dependencias

Abrir una nueva terminal y ejecutar:

yarn

Ejecución local (opcional)

En la terminal, ejecutar:

yarn run serve

Despliegue en Baota

Compilación a archivos estáticos

En la terminal, ejecutar:

yarn build

Una vez completado, aparecerá la carpeta dist en la raíz del proyecto. Esta contiene los archivos del sitio web.

Copie el contenido de esta carpeta y créelo como un proyecto PHP en Baota.

Despliegue como aplicación Node.js

Pendiente de completar.