3

La arquitectura de los archivos es el siguiente.

introducir la descripción de la imagen aquí

El archivo package.json contiene el siguiente código:

{
  "name": "my-music",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "vue": "^2.6.10",
    "vuetify": "^2.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-vuetify": "^2.0.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

El archivo firebase.json contiene el siguiente código:

{
    "hosting": {
        "public": "public",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [
            {
                "source": "**",
                "destination": "/index.html"
            }
        ]
    }
}

Si ejecuto mi proyecto con npm run serve lo ejecuta en mi localhost por el puerto 8080, en cuyo caso muestra lo siguiente.

introducir la descripción de la imagen aquí

/public/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>My music</title>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but my-music doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app">
            <h1>Hola</h1>
        </div>
        <!-- built files will be auto injected -->
    </body>
</html>

Sin embargo cuando ejecuto firebase serve simplemente me muestra el public/index.html introducir la descripción de la imagen aquí

Se supone que en este caso deberían mostrar lo mismo ambos, sin importar que localhost corra por el puerto 8080 y el server corra por el puerto 5000.

6
  • ¿Alguna idea del siguiente problema?
    – jsdnlb
    el 27 ene. 2020 a las 14:01
  • 1
    Pareceria no estar ejecutando vue en el segundo caso.. que tiene el package.json?
    – gbianchi
    el 27 ene. 2020 a las 14:02
  • He incluido el código de package.json en la pregunta.
    – jsdnlb
    el 27 ene. 2020 a las 14:04
  • Y cuando haces firebase serve, estas ejecutando el servidor, no vue.. estoy en lo correcto? porque no se ve ese hola cuando ejecutas npm run serve?
    – gbianchi
    el 27 ene. 2020 a las 14:07
  • Sí, cuando ejecuto [firebase serve] muestra el "Hola" y ahí se queda. Pero cuando ejecuto [npm run serve], el muestra la misma página "Hola", e inmediatamente muestra la app "My-music", muestra "Hola" por unos milisegundos.
    – jsdnlb
    el 27 ene. 2020 a las 14:10

1 respuesta 1

3

Me complace anunciar que he solucionado el problema, y realmente fueron malas prácticas las que tuve realizando el proceso de instalación y construcción del proyecto, pero tengo la motivación de dar una breve descripción por si algún despistado le pasa lo mismo.

Primero ejecute nuevamente el comando, la idea es realizar nuevamente todo el proceso sin tocar nada de configuración:

sudo npm install -g firebase-tools

Luego realizo nuevamente el proceso de logeo e inicio de Firebase

firebase login
firebase init

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? Yes
✔  Wrote dist/index.html Enter

Seguido realicé el proceso de construcción y preparación necesario para el proyecto sea utilizado:

npm run build

Finalmente firebase deploy y voilà, el proyecto empezó a funcionar correctamente.

Link de proyecto hosteado: https://mymusic-pro.firebaseapp.com/

Agradecimientos para @gbianchi que de cierta me hizo caer en cuenta del error.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.