ERROR: Deploy VueJS App in Firebase Hosting

Question

I have a vue application, I install firebase tools and upload the application to firebase hosting, the first time all done and I make npm run build and firebase deploy, but when I realise any change, and later do npm run serve or build or firebase deploy I have the next error:

Template execution failed: ReferenceError: features is not defined

  ReferenceError: features is not defined

  - index.html:4 eval
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:4:10

  - index.html:7 module.exports
    [.]/[html-webpack-plugin]/lib/loader.js!./public/index.html:7:3

  - index.js:284 Promise.resolve.then
    [real]/[html-webpack-plugin]/index.js:284:18


  - next_tick.js:188 process._tickCallback
    internal/process/next_tick.js:188:7

Any idea? I don't know why this problem succeed. Thank you.

Princewill Iroka · Accepted Answer · 2019-08-26 19:04:14Z

9

When you installed firebase tools, it generated a public folder for you. Inside that public folder, there is an index.html file(this file is the cause of the error). Just delete everything inside that index.html file, then replace with your own content.

edited Aug 26, 2019 at 19:04

answered Aug 24, 2019 at 8:14

Princewill Iroka

5461 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marcos De la Cruz · Accepted Answer · 2020-01-15 17:48:37Z

In firebase.json file in hosting change "public": "public" to "public": "dist" When you installed firebase, it changed the file public/index.html, the original version looks like this:

<!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>hello-world-vuetify</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but hello-world-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Replace the content, it worked for me

Collectives™ on Stack Overflow

ERROR: Deploy VueJS App in Firebase Hosting

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related