Cómo resolver el problema de implementar proyectos Vue en el servidor
Creo que después de instalar el desarrollo de andamios de Vue-cli, el proyecto puede ejecutarse normalmente en el entorno de desarrollo, pero después de ingresar al entorno de producción y compilar y empaquetar, Cuando se coloca en el servidor, el proyecto no funcionará correctamente y se producirán problemas como páginas en blanco o saltos de ruta a 404. No entre en pánico si encuentra estos problemas. La configuración correcta y la simple cooperación en segundo plano pueden resolverlos.
Cómo empaquetar
Basado en Vue-Cli, use npm run build para operaciones de empaquetado
Cómo implementar
Paquete de recursos según en Vue-Cli generalmente hay un directorio estático y un archivo index.html en el directorio dist. Puede enviar estos dos archivos directamente al servidor.
Esta es la primera vez que usamos Vue-Cli.
Pero a veces, lanzamos directamente el archivo dist al servidor
Problema
Después de empaquetarlo en el servidor, hay un problema con la ruta de referencia de el recurso
Después de ser empaquetado en el servidor, aparece una página en blanco
Después de ser empaquetado en el servidor, existe el problema de que el tipo CSS importado es interceptado y convertido a "texto /plain"
Después de ser empaquetado en el servidor, hay un problema de actualización de ruta 404
El siguiente autor le dirá cómo resolver estos problemas según mi propia experiencia en el proyecto Vue. desde la compilación y el empaquetado hasta la implementación normal del servidor.
1. Configuración de front-end:
① Configuración del enrutador: especifique el punto de inicio de la ruta (en modo de desarrollo, el proyecto Vue se coloca en el directorio raíz del servidor local). generado por el paquete web usando nodeJs, pero en el servidor real, el proyecto no se colocará en el directorio raíz,
Enrutador
Ruta de la carpeta de discusión avanzada y de fondo donde se encuentra el proyecto implementado en el servidor
② Compilar y empaquetar la configuración
Vaya a configuración --gt index. Utilice npm run build para empaquetar, de esta manera puede completar la configuración de front-end.
Segunda configuración de back-end:
¡El enrutamiento salta a 404! es que el back-end no realiza ningún procesamiento para el enrutamiento del front-end virtual. Si no se encuentran los recursos en la ruta especificada, 404 solo se puede devolver al cliente.
Solución (Apache). : Vuelva a escribir la URL ---- y cambie la ruta del proyecto Vue en la carpeta donde se encuentra el servidor a Vue La carpeta del servidor donde se encuentra el proyecto, por ejemplo:
leibo.group/pcMall/. .... Reescrito en leibo.group/pcMall/index.html
.hatccess
Apache específico habilita enableoverride, reescritura de URL, backend resuelto en minutos
Si se trata de cualquier otro tipo de servidor
Consulte /etc/history/essentials/history.essentials /history-mode.html
Resumen: en un servidor de implementación de una sola página, en realidad, se trata de una idea más bien diferente: utilizar el enrutamiento frontal para controlar los cambios en el contenido de la interfaz de usuario.