Question

我正在研究Firestore Vue项目，但在构建项目时遇到问题。在本地服务器上运行非构建文件可以正常工作，并且在运行build命令后，所有文件似乎都是正确的。但是，将文件上传到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'
        }
      }
    }
  }
}

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托管应用程序内置文件不正确

2 个答案: