Search code examples
firebasevue.jsfirebase-hosting

Vue Firebase Hosting App Built Files Are Incorrect

I am working on a Firestore, Vue project and having an issue with building my project. Running the non-built files on a local server works just fine and after running the build command, the files all appear to be correct. However, after uploading the files to Firebase (or creating a local server using the built files using the firebase serve command), it just shows a blank page. So I inspected the files and the css and js files are the exact same as the HTML file.

I know that this guy had the same issue, Upload to Firebase Hosting not working correctly, but I have gone through every file I feel like may be the culprit and still cannot find where the issue is — although that may just be due to my lack of knowledge in how webpack works. I think it may be some misconfiguration in the vue.config.js file but not sure. I would appreciate any help in getting my project hosted! Thanks!

Here is my file structure:

 - 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

Compiled 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'
        }
      }
    }
  }
}
Solution

  • It looks like I just had my vue.config.js file configured incorrectly. I changed the baseUrl field from '/dist/' to '.' and the file paths in the compiled files were correct.