时间戳

首页 > 解决方案 > Vue Firebase 托管应用程序构建的文件不正确

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

问题描述

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

我知道这个人也有同样的问题，上传到 Firebase 主机无法正常工作，但我浏览了每一个我觉得可能是罪魁祸首的文件，但仍然找不到问题所在——尽管这可能只是因为我缺乏了解 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>

索引.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>

应用程序.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'
        }
      }
    }
  }
}

标签： firebasevue.jsfirebase-hosting

解决方案

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

dist
public
    index.html

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

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

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

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

推荐阅读