Urls generadas en index.html no funcionan correctamente bajo "protocolo" file://

vue-cli
webpack

#1

Hola! Hace poco cree un proyecto con vue-cli 3 y estuve trabajando con él solamente usando npm run serve, ahora que lo intento exportar usando npm run build resulta que las urls generadas en mi index.html no son correctas para usarse directamente en el sistema de archivos:

<link href=/js/app.d9cadbdc.js rel=preload as=script>

<link href=/css/chunk-vendors.3e8d1a00.css rel=preload as=style>

(Estos links provienen del index.html generado en la carpeta dist)

Como estoy trabajando con Apache Cordova necesito que las urls no tengan ese / inicial (que obviamente puedo borrar manualmente en cada build pero la idea es que se haga automáticamente)

¿Como soluciono este problema?

pd: El protocolo “file” no existe solo lo comente de esa manera ya que es mas comprensible que
file URI scheme


#2

Hola, esas urls son y deben quedar relativas, ya que el dominio puede cambiar y la app deberia de poder seguir funcionando. Si empiezan con / es simplemente para indicar que son relativas al root.

Si ves el protocolo file: es probablemnte por que estas abriendo el index.html directamente desde el navegador de archivos de tu sistema operativo. Aunque eso es posible, casi ninguna web funcionara como es debido de ese modo.

Para probar tu proyecto localmente debes recrear algun servidor web y abrir la url al mismo desde tu navegador. Lo mas sencillo es usar el modulo http-server que te permite lanzar un servidor web usando tu carpeta local. Es mas o menos lo que hace el comando serve.


#3

Es verdad sin embargo como comenté estoy trabajando con apache Córdova por lo que no hay ningún dominio, de todas maneras ya encontré la solución, gracias.


#4

Para que funcione correctamente con un proyecto que sirve los archivos de manera local (como apache cordova), simplemente hay que modificar el parámetro baseUrl de la siguiente manera:

"vue": {
  "baseUrl": "./"
}

Esto lo agregue en package.json, aunque si posees un archivo vue.conf.js deberías agregarlo en ese lugar (la sintaxis es distinta en ese caso).

Consultar: https://cli.vuejs.org/config/#baseurl