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

Question

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

我知道这个人有同样的问题，，但我已经检查了所有我认为可能是罪魁祸首的文件，但仍然找不到问题所在——尽管这可能只是由于我对 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'
        }
      }
    }
  }
}

Answer 1

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

dist
public
    index.html

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

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

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

和webpack生成的static目录也要部署在public目录下。目前它很可能在 dist 目录下。

Answer 2

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

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

Vue Firebase Hosting App Built Files Are Incorrect

firebase

vue.js

firebase-hosting