A través de vue-Usar cli para aprender a modificar la configuración de entorno múltiple y problemas de publicación de Webpack

Vue es tan popular ahora, en parte también gracias a la herramienta de generación de cuadros de inicio oficial Vue-cli, simplifica significativamente el costo de configuración del entorno para principiantes, pero en la práctica, a menudo necesitamos implementar otras funciones para modificar webpack. Este artículo se centrará en aprender Vue según algunas necesidades de negocio reales.-plantilla generada por cli, luego realizamos las modificaciones pertinentes.

Vue-directorio de archivos de plantilla generados por cli

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

El punto principal que nos importa en este artículo es

build - Código de tareas de compilación

config - Archivo de configuración de webpack

package.json - Información básica del proyecto

No se describirá en detalle el significado de cada línea de configuración de webpack aquí, consulte vue2.0 archivo de configuración de webpack de la plataforma de andamio análisis

Requisito común uno: configuración y publicación de múltiples entornos

Vue-El template generado por cli solo configura la línea de comandos npm run dev, npm run build, que se utiliza para iniciar el servicio de entorno de desarrollo y ejecutar el paquete. Mientras que en el flujo de desarrollo normal de una empresa, al menos habrá desarrollo, simulación de prueba y entorno de producción, y las direcciones de solicitud de servidor o algunos parámetros de configuración serán diferentes en cada entorno, y al publicar, es necesario publicar en varios servidores, por lo que se necesita ejecutar scripts automatizados para realizar la construcción y publicación.

Primero debemos aclarar este problema, citar un artículo, autor: Zheng Haibo, enlace, fuente: Zhihu

Esto no tiene nada que ver con vue, es un problema general: ¿dónde se construye el código. Si el servidor del usuario se refiere a la ejecución del servidor, realmente ninguna de las dos es una buena opción. Muchos recién llegados, incluyendo yo antes de trabajar, creían que la implementación del código sería así

Pero en las grandes empresas de internet puede ser más complicado. A continuación, se presentan prácticas comunes, y se han simplificado algunos procesos, solo para facilitar la comprensión de los recién llegados. Al enviar código a los servidores git o svn, preste atención aquí son los archivos de origen, no los archivos después de la construcción

2. Al construir el servidor, se extraerá la versión de código a publicar desde el servidor de git aquí, se completará la instalación de las dependencias, como vue del usuario. Y se construirán los archivos para la implementación, que generalmente también se comprimirán en un paquete comprimido para la gestión

3El paquete de publicación después de la construcción se subirá a un intermediario: el clúster del servidor de gestión de archivos.

4Los servidores en ejecución generalmente no serán un solo servidor, sino un clúster. Estos n servidores extraerán el paquete comprimido correspondiente de un servidor de archivos y lo descomprimirán para ejecutarlo.

　

En realidad, hay un flujo de proceso con una secuencia clara aquí, y sería muy molesto si todo se manejara manualmente. Por lo tanto, las grandes empresas generalmente tienen una plataforma de despliegue automatizado para coordinar y completar estas tareas en todo el sistema. De hecho, como desarrollador, solo necesita hacer clic en 'despliegue uno clic' para completar lo mencionado anteriormente.

Si se配合 con plataformas de despliegue automatizado proporcionadas por gitlab、github, como webhook de notificación automática, una vez que se haya completado el envío de código de versión estable (Push Event), no necesitamos hacer clic en ningún botón. Esto es un caso典型 de separación de construcción y despliegue, que ofrece muchos beneficios, como asegurar que se construya una única versión de código, evitar la posibilidad de inconsistencias en la construcción de múltiples entornos. La construcción generalmente es una acción de alto costo que puede causar inestabilidad en el servidor en ejecución. Puede revertir o restaurar rápidamente, sin necesidad de reconstruir el código de la misma versión...

Después de tanto hablar, la construcción y打包 no es una tarea sencilla, por lo que se necesitan herramientas automatizadas para la configuración. Una solución madura ya existente es construir y publicar una aplicación contenedorizada utilizando Docker. Sin embargo, este es un área en la que no estoy muy familiarizado, por lo que los estudiantes que tengan experiencia pueden compartir.

Resumen

Como se mencionó anteriormente, el editor les ha presentado la configuración y problemas de publicación de múltiples entornos de Webpack, esperamos que les haya sido útil. Si tienen alguna pregunta, déjenos un mensaje y el editor les responderá a tiempo. También les agradezco mucho el apoyo a la tutorial de clamor!

Aviso: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.