Home / Questions / 324596
Accepted
jsdnlb
Asked: 2020-01-27 14:54:55 +0800 CST 2020-01-27 14:54:55 +0800 CST

How to display the same view from localhost on a Firebase server with Vue.js?

  • 772

The architecture of the files is as follows.

enter image description here

The file package.jsoncontains the following code:

{
  "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"
  ]
}

The file firebase.jsoncontains the following code:

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

If I run my project with npm run serveit runs on my localhost on port 8080, in which case it shows the following.

enter image description here

/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>

However when I run firebase serveit just shows me the public/index.html enter image description here

Both are supposed to show the same thing in this case, regardless of whether localhost runs on port 8080 and the server runs on port 5000.

firebase

1 Answers

  1. Best Answer

    I am pleased to announce that I have solved the problem, and it was really bad practices that I had during the installation and construction process of the project, but I have the motivation to give a brief description in case someone who is clueless has the same thing happen to them.

    First run the command again, the idea is to perform the entire process again without touching any configuration:

    sudo npm install -g firebase-tools

    Then I perform the process of logging in and starting Firebase again

    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

    Next I carried out the construction and preparation process necessary for the project to be used:

    npm run build

    Finally firebase deployand voilà , the project started to work correctly.

    Hosted project link: https://mymusic-pro.firebaseapp.com/

    Thanks to @gbianchi who made me realize the error.

    • 3