Vue Firebase 托管应用程序构建的文件不正确答案

【问题标题】：Vue Firebase Hosting App Built Files Are IncorrectVue Firebase 托管应用程序构建的文件不正确
【发布时间】：2019-01-18 15:14:52
【问题描述】：

我正在开发一个 Firestore、Vue 项目，但在构建我的项目时遇到了问题。在本地服务器上运行非构建文件工作得很好，在运行构建命令后，所有文件似乎都是正确的。但是，在将文件上传到 Firebase（或使用 firebase serve 命令使用构建的文件创建本地服务器）后，它只显示一个空白页面。所以我检查了文件，css和js文件与HTML文件完全相同。

我知道这个人也有同样的问题，Upload to Firebase Hosting not working correctly，但我浏览了所有我认为可能是罪魁祸首的文件，但仍然找不到问题所在——尽管这可能只是因为我缺乏了解 webpack 如何工作的知识。我认为这可能是 vue.config.js 文件中的一些错误配置，但不确定。对于托管我的项目的任何帮助，我将不胜感激！谢谢！

这是我的文件结构：

 - dist
  - src
   - assets
    - css
    - img
    - js
  - favicon.ico
  - index.html
 - public
  - index.html
 - src
  - App.vue
  - main.ts
 - .firebaserc
 - firebase.json
 - package.json
 - vue.config.js

编译后的 index.html

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta http-equiv=Content-Type content="text/html; charset=UTF-8">
        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=msapplication-tap-highlight content=no>
        <meta name=description content="Steel Tech of the Ozarks designs & manufactures pre-engineered metal buildings, driven by an intentional, no-compromise passion for excellence.">
        <meta name=keywords content=steel,building,metal,structural,design,manufacture>
        <title>Company Name</title>
        <link rel="shortcut icon" href=../src/assets/favicon/favicon.ico>
        <meta name=theme-color content=#6e8995>
        <link as=style href=/dist/src/assets/css/app.64e0dd85.css rel=preload>
        <link as=style href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=preload>
        <link as=script href=/dist/src/assets/js/app.00d6273a.js rel=preload>
        <link as=script href=/dist/src/assets/js/chunk-vendors.90527da6.js rel=preload>
        <link href=/dist/src/assets/css/chunk-vendors.9e123139.css rel=stylesheet>
        <link href=/dist/src/assets/css/app.64e0dd85.css rel=stylesheet>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id=app>
            <script src=/dist/src/assets/js/chunk-vendors.90527da6.js></script>
            <script src=/dist/src/assets/js/app.00d6273a.js></script>
    </body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <title>Company Name</title>
    <link rel="apple-touch-icon" sizes="180x180" href="../src/assets/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../src/assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../src/assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="../src/assets/favicon/site.webmanifest">
    <link rel="mask-icon" href="../src/assets/favicon/safari-pinned-tab.svg" color="#ff6600">
    <link rel="shortcut icon" href="../src/assets/favicon/favicon.ico">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- Built files will be auto injected -->
    <div id="app"/>
  </body>
</html>

App.vue

<template>
  <v-app>
    <router-view/>
  </v-app>
</template>

main.ts

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'

import '@/plugins/vuetify'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app')

.firebaserc

{
  "projects": {
    "default": "schedule-maxx"
  }
}

firebase.json

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

vue.config.js

module.exports = {
  runtimeCompiler: true,
  lintOnSave: true,
  productionSourceMap: false,
  outputDir: 'dist',
  assetsDir: 'src/assets',
  baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api/v1'
        }
      }
    }
  }
}

【问题讨论】：

你编译/构建的index.html是什么？
@BryanMassoth 我刚刚更新了我的问题以包含 dist 目录的内容和编译后的 index.html。它被缩小了，但为了便于阅读，我对其进行了美化。

标签： firebase vue.js firebase-hosting

【解决方案1】：

关于您的文件结构，特别是：

dist
public
    index.html

以及您重写为/index.html 的事实（参见firebase.json 文件）

我认为你的firebase.json 文件应该如下开始。（但是，由于您没有显示 dist 目录中的内容，我不能 100% 确定！）：

{
  "hosting": {
    "public": "public",
    ....
  }
}

并且webpack生成的static目录也应该部署在public目录下。目前很可能在dist 目录下。

【讨论】：

我刚刚更新了我的问题以包含 dist 目录的内容和编译后的 index.html。它被缩小了，但为了便于阅读，我对其进行了美化。 dist 目录仅在运行 build 命令后创建；因此它是所有编译文件所在的位置。
您应该只保留已编译 index.html 并删除另一个。然后，由于在编译的 index.html 中资产被称为/dist/src/assets/，dist 目录应位于主机名的根目录。因此，如果您 (a) 如上所述修改 firebase.json 文件 (b) 将 public 下的 index.html 替换为已编译的文件，并且 (c) 复制/粘贴 public 下的“dist”目录，它应该可以工作（重新部署后）。但是没有测试它......

【解决方案2】：

看起来我的 vue.config.js 文件配置不正确。我将 baseUrl 字段从“/dist/”更改为“。”并且编译文件中的文件路径是正确的。

【讨论】：