Vue.js Vite 應用程序在開發中工作，但在構建后崩潰

Question

我已經使用 vite 和 vue.js 建立了一個網站。 當我運行 npm 運行開發時，一切正常。 我使用 npm run build 構建了應用程序，但應用程序不再工作。 我得到一個空白頁，錯誤提示“無法讀取未定義的屬性（讀取 isDark）”。 錯誤信息

這是我的相關 app.vue 代碼。 這是唯一使用“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

例如，在沒有這個的模板中使用 isDark

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

或者

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

您也不需要在事件處理程序中匿名 function