错误：在 Firebase 托管中部署 VueJS 应用

Question

我有一个 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

任何的想法？ 我不知道为什么这个问题会成功。 谢谢你。

Answer 1

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

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

替换内容，它对我有用

错误：在 Firebase 托管中部署 VueJS 应用

问题描述

2 个解决方案

解决方案1
6 2019-08-24 08:14:28

解决方案2
2 2020-01-15 17:48:37

错误：在 Firebase 托管中部署 VueJS 应用

问题描述

2 个解决方案

解决方案1 6 2019-08-24 08:14:28

解决方案2 2 2020-01-15 17:48:37

解决方案1
6 2019-08-24 08:14:28

解决方案2
2 2020-01-15 17:48:37