Tengo un proyecto simple de Vue.js. Ejecuté el comando yarn build , luego copié todos los archivos dentro de la carpeta dist/ en el servidor web Apache.
Cuando mi URL apuntó al index.html generado, no apareció nada. Descubrí que esto se debía a que index.html apuntaba a las rutas relativas incorrectas que contienen los archivos js y CSS.
Por ejemplo, noté este relativo incorrecto dentro de index.html <script type=module src=/js/app.4dcb0a0b.js></script> El correcto debería ser <script type=module src=./js/app.4dcb0a0b.js></script> Debería ser ./js y no /js .
Después de corregir las rutas relativas, index.html aparece correctamente.
Es tedioso si tengo que cambiar manualmente las rutas relativas incorrectas cada vez. ¿Cómo puedo tener una mejor solución?
Estoy usando @vue/cli 5.0.1, yarn v1.22.17
Responderé a mi propia pregunta.
El crédito por la respuesta va a este artículo.
https://medium.com/js-dojo/how-to-solve-vue-js-prod-build-assets-relative-path-problem-71f91138dd79
La solución es agregar la siguiente línea a vue.config.js;
module.exports = {publicPath: ''};No sé por qué funciona esta solución. Si alguien sabe, por favor deje algunos comentarios. Gracias.