错误：在 Firebase 托管中部署 VueJS 应用程序答案

【问题标题】：ERROR: Deploy VueJS App in Firebase Hosting错误：在 Firebase 托管中部署 VueJS 应用程序
【发布时间】：2019-07-11 15:06:24
【问题描述】：

我有一个 vue 应用程序，我安装了 firebase 工具并将应用程序上传到 firebase 托管，第一次全部完成，我制作了 npm run build 和 firebase deploy，但是当我意识到有任何变化时，然后再做 npm run serve或build 或firebase deploy 我有下一个错误：

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

有什么想法吗？我不知道为什么这个问题会成功。谢谢。

【问题讨论】：

标签： firebase vue.js webpack firebase-hosting

【解决方案1】：

当您安装 firebase 工具时，它会为您生成一个公用文件夹。在该公用文件夹内，有一个 index.html 文件（此文件是错误的原因）。只需删除该 index.html 文件中的所有内容，然后替换为您自己的内容。

【讨论】：

【解决方案2】：

在托管中的 firebase.json 文件中将 "public": "public" 更改为 "public": "dist" 当你安装firebase时，它改变了文件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>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>

替换内容，对我有用

【讨论】：