Cómo empaquetar recursos estáticos en vue
Este artículo resuelve principalmente
① el problema del error de ruta de recursos estáticos cuando la configuración predeterminada de vue-cli se empaqueta e implementa en una ruta específica;
②. Después de empaquetar los recursos estáticos, la ruta del archivo CSS que utiliza rutas relativas para introducir imágenes grandes es incorrecta.
1. Problema
Después de ejecutar npm run build utilizando el archivo de configuración de empaquetado predeterminado generado por el scaffolding vue-cli, el proyecto se implementa en una ruta específica:
// ip: port/public/springActivity
Puedes acceder en este momento:
http://ip:port/public/springActivity/index.html
Se puede acceder aindex.html normalmente, pero las respuestas js, css y otros servidores de archivos a los que se hace referencia son todas 404. Verifique la ruta del recurso importado de la siguiente manera:
http://ip:port/static /css/app.cea07642cd24c0d7a5c4b9b7afc7ff64.css
http://ip:port/static/js/app.815851e87b083afb82bf.js
2 Análisis
Como Como se puede ver en lo anterior, la ruta del paquete de recursos es incorrecta. Se puede ver que la ruta del paquete de recursos es incorrecta. Los recursos empaquetados utilizan la ruta del directorio raíz absoluta, por lo que el proyecto se implementará en un directorio específico y la ruta del recurso introducida no se puede analizar correctamente.
3. Solución
Al empaquetar, debe utilizar rutas relativas para manejar recursos estáticos. Para cambiar la configuración de la ruta de publicación de activos en la compilación (config/index.js, objeto de compilación):
Cambie activosPublicPath: '/' a activosPublicPath: './',
Empaquételo nuevamente e implemente los recursos en la ruta especificada, y luego acceda:
En este momento, se puede acceder a index.html normalmente y también se puede acceder a los recursos js y css normalmente, pero los activos directorio importado por css Error de recurso de imagen grande (404 del lado del servidor)
4 Vuelva a analizar
Vea la ruta del recurso de imagen importada de la siguiente manera:
http. ://ip:port/ public/springActivity/static/css/static/img/question_bg.61a2825.png
La ruta de recursos en el proyecto real es la siguiente:
índice .html
estático /
|--js/
|--*.js
|-css/
|--*.css
|--img/
|--*.png Obviamente, la ruta de importación de la imagen es incorrecta.
Al analizar la ruta de la imagen importada, encontramos que hay dos directorios más "/static/css" en la ruta. Se supone que la ruta de la imagen importada por el archivo css en el directorio css es "/static/img. /question_bg.61a2825.png". Verifique el archivo css. , el css que introduce la ruta de la imagen es el siguiente:
fondo: url(static/img/question_bg.61a2825.png)
5. Al resolver el archivo
css Cuando hay un problema de ruta, debe ser que la ruta del recurso de enlace en el paquete no está configurada correctamente. Analice el proceso de empaquetado y vea si el CSS está en formato. la introducción de js o el archivo vue escrito en el archivo css se procesa primero mediante less, postcss, etc. Después del procesamiento, ExtractTextPlugin lo procesará para extraer todo el CSS en js al archivo app.css.
Primero, configure options.extract en falso, desactive la función de extracción CSS, empaquete e implemente en el directorio especificado nuevamente, visite: http://ip:port/public/springActivity/index.html, zap, página Visualización normal, el trabajo casi está terminado.
Al analizar los archivos empaquetados, se descubrió que no había ningún archivo css y que todos los archivos css se encontraron en el archivo app.js; css se inyectó en el archivo index.html a través de js, por lo que la imagen. recursos introducidos en el archivo css La ruta debe ser relativa al archivo index.html, es decir: "static/img/question_bg.61a2825.png", que es la misma que la ruta del recurso de imagen en el archivo css a continuación, por lo que Se puede acceder a la imagen normalmente.
antecedentes: url(static/img/question_bg.61a2825.png)
Ahora estoy bastante seguro de saber dónde está el problema, es decir, ExtractTextPlugin al extraer archivos CSS. no hay conversión de rutas de recursos, lo que da como resultado que app.css introduzca recursos estáticos en relación con el directorio "static/img/.png", que es relativo a index.html: static/css/static/img/.png.
Por lo tanto, debe configurar los parámetros de ruta de recursos estáticos para utilizar el complemento ExtractTextPlugin y consultar información relacionada.
Aprendí que puedes agregar publicPath: ".../...
if (options.extract) {
return ExtractTextPlugin.extract({
uso: cargadores,
respaldo: 'vue-style-loader',
publicPath: "./.../"//add
})
} Después de implementar el paquete en el directorio especificado, acceda al archivo index.html. Todo en la página es normal, el archivo app.css se importa normalmente y los recursos de imagen. también se importa normalmente. Verifique los recursos de imagen en el archivo app.css. El método de introducción:
fondo: url(.../.../static/img/question_bg.61a2825.png
En la configuración publicPath, la ruta de introducción del archivo css está en la configuración Agregar ruta antes de la ruta del archivo de imagen;
El valor del atributo publicPath es la ruta relativa desde la aplicación empaquetada. css al archivo index.html
El valor del atributo publicPath es la ruta relativa desde el archivo app.css empaquetado al índice. Ruta relativa del archivo .html.
Los recursos de imagen también se pueden colocar directamente en el directorio estático generado por vue-cli para evitar los problemas anteriores, pero este método no puede agregar el nombre de la imagen a la cadena md5 y no favorece el control de versiones
Lo anterior es lo que he compilado para usted. Espero que sea útil para su trabajo futuro.
Artículos relacionados:
¿Cómo lograr el efecto de animación de rebote de borde táctil en jQuery?
Cómo usar sass en vue cli webpack (tutorial detallado)
¿Cómo cambiar el valor de texto de la etiqueta P en jQuery?