Una breve discusión sobre cómo empaquetar el proyecto vue y lanzarlo al servidor.
Si se trata de vue-cli (no un simple andamio), este artículo puede resultar útil. Enlace de dirección: Cómo empaquetar vue-cli en línea
Primero describiré los problemas encontrados durante el proceso:
1 Después del empaquetado, coloque la carpeta dist y index.html en tomcat. . Cuando se accede en el navegador, aparece una página en blanco y f12 indica 404.
2. Los recursos estáticos empaquetados tienen rutas absolutas y no se pueden importar al proyecto, que también es un 404.
1. Estructura del directorio del proyecto
Esto está empaquetado, por lo que hay una carpeta dist y el método de empaquetado es npm run build.
2. Configuración del paquete de red. js
Esto es solo una pequeña parte, porque lo más importante aquí es publicPath, que se mencionará a continuación. Esto puede resolver el problema de que no se introduzcan recursos estáticos 404.
3.npm ejecuta el archivo del paquete de compilación.
Después de que npm ejecute el paquete de compilación, se generará una carpeta dist. Los directorios en esta carpeta son:
No tengo muy claro el principio de la herramienta de empaquetado del paquete web, por lo que no sé qué carpeta se debe generar. Eso es lo que está pasando aquí. Principalmente un build.js principal, porque este es el archivo js introducido por nuestro index.html. También hay algunos archivos de imagen, así como ttf y woff generados por ElementUI.
4. ¿Cómo ponerlo en el servidor?
A continuación, debe colocar la carpeta dist generada y el archivo index.html en el servidor. Solo necesita estos dos. Primero, puse estos dos archivos en la misma carpeta y los llamé gas (aleatorio).
Luego coloque la carpeta en Tomcat. Yo puse la carpeta en el directorio de carpetas de aplicaciones web de Tomcat:
Bien, una vez completada la implementación, inicie Tomcat. Encontrará una página en blanco. Algunos recursos estáticos son 404.
5. Resuelva el problema de que no se pueden introducir páginas en blanco y recursos estáticos.
1. En primer lugar, puede ver el problema de las páginas en blanco en f12, que es el motivo de la ruta absoluta. Después del empaquetado, las rutas de importación deben ser relativas. En este momento, necesitamos modificar la página index.html.
Mire el texto original:
Mire, /dist/build.js hace referencia a una ruta absoluta, lo que provoca 404 cuando Tomcat accede a la página index.html. Necesitamos cambiar la ruta a una ruta relativa. /dist/construir/. Hay otro punto crucial. Bien, aquí deberíamos poder mostrar la página de inicio.
Pero encontrará que mis recursos estáticos y mis imágenes (excluyendo la introducción en formato img), por ejemplo, mis imágenes en background:url() en css muestran 404.
2. Resuelva el problema de falla de recursos estáticos.
Esto requiere modificar publicPath en nuestro webpack.config.js. Una vez creado el entorno de construcción vue-cli predeterminado, publicPath se ve así:
Puedes ver que nuestra ruta es:/. dist/. Entonces, si abrimos la página en este momento, la ruta del recurso estático será así, error 404: http://10.0.181:8088/dist/BG.png? fe9b 889 CEA 51978538 ce 352593 be 0573
Evidentemente esto no es coherente con el camino que queremos. Lo publiqué arriba. En el directorio de archivos de Tomcat, puse dist e index.html en una carpeta de gas.
Entonces, la ruta correcta debería ser así:
http://10.0.0.181:8088/gas/dist/BG.png? fe9b 889 CEA 51978538 ce 352593 be 0573
¡Mira la diferencia!
Solución:
Así que necesito cambiar la ruta de salida publicPath: /gas/dist/ en webpack.config.js y agregar la ruta de la carpeta más externa, para que pueda estática Se introducen recursos en el proyecto.
Bien, hasta ahora, se han resuelto dos problemas. Uno es la página en blanco de index.html y el otro es la ruta incorrecta del recurso estático.
Los recursos a los que se hace referencia mediante enlace y srcipt en la página 6.index.html no son válidos:
El motivo es que la dirección de la ruta es incorrecta:
La solución de compromiso es colocar manualmente los recursos a los que hace referencia en la carpeta dist empaquetada y luego hacer referencia a ellos en index.html según la ruta relativa a dist.
El Icon.ico en el código significa que coloqué manualmente el ícono en la carpeta dist y luego lo hice referencia de acuerdo con la ruta de referencia correspondiente. Lo mismo ocurre con otras referencias de CSS y JS.
7. Problemas que deben resolverse:
1. En mi proyecto, utilicé el marco ElementUI, pero después de empaquetarlo y colocarlo en el servidor, descubrí que El estilo del botón había cambiado. El relleno no es válido, por lo que tengo que agregar el estilo manualmente.
2. En mi index.html, si importo el archivo css vinculado, todavía no puedo importar la ruta relativa, así que coloco todos los estilos css en los estilos de los componentes respectivos, y los demás están. generalmente inyectado con npm Install como dependencias.
8. Problemas relacionados y soluciones encontradas en línea.
1. ¿El proyecto Vue está empaquetado con Webpack y colocado en el servidor, pero el acceso es una página en blanco? Llevo mucho tiempo trabajando en esto pero no sé por qué.
2. En el proyecto vue, el archivo index.html generado por npm run build solo puede tener efecto cuando se abre en el directorio raíz. ¿Cómo solucionarlo?
3. La forma correcta de implementar aplicaciones Vue en el servidor.