Vue.js Vite 应用程序在开发中工作，但在构建后崩溃

Question

I have built a website using vite and vue.js. When I run npm run dev, everything works fine. I built the app with npm run build but the app doesn't work anymore. I am getting a blank page with an error saying "cannot read property of undefined (reading isDark)". error message

here is my relevant app.vue code. This is the only component, that uses 'isDark':

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
</script>

<template>
  <div :class="'portfolio  ' + (this.isDark ? 'dark' : '')">
    <Header
      @toggleDarkMode="() => toggleDarkMode()"
      :dark="this ? this.isDark : false"
    />
    <div
      class="
        content
        transition-colors
        duration-300
        ease-linear
        text-black
        dark:text-white
        bg-gray-300
        dark:bg-gray-800
        pt-16
      "
    >
      <router-view />
    </div>
    <Footer />
  </div>
</template>

<script>
export default {
  name: "App",
  emits: ["toggleDarkMode"],
  beforeCreate() {
    console.log(this.isDark);
    console.log(this.isDark != null);
    this.isDark = localStorage.getItem("darkMode") == "true";
    console.log(this.isDark);
  },
  created() {
    this.isDark = localStorage.getItem("darkMode") == "true";
  },
  methods: {
    toggleDarkMode() {
      if (this === undefinded) return;
      this.isDark = !this.isDark;
      localStorage.setItem("darkMode", this.isDark);
    },
  },
  data() {
    return {
      isDark: true,
    };
  },
  components: [Header],
};
</script>

<style scoped>
</style>

Answer 1

Use isDark in template without this for example

<Header
  @toggleDarkMode="toggleDarkMode"
  :dark="isDark"
/>

Or

<Header
  @toggleDarkMode="toggleDarkMode"
  :dark="!!isDark"
/>

Also you don't need anonymous function in event handler