Referenzelemente der Vite 2-Produktionsumgebung werden nicht mithilfe der Compostion-API definiert

Question

Ich verwende vue3 mit der Kompositions-API, aber wenn ich das Projekt erstelle, ist das Ref-Element immer undefiniert.

Ich habe es kopiert, vielleicht habe ich es falsch verwendet, aber ich weiß nicht warum.

1. Ich habe einen Verweis in der Hooks-Funktion definiert.

const isShow = ref(false)
const rootRef = ref<HTMLDivElement>();

export default function () {
  function changeShow() {
    isShow.value = !isShow.value;
    console.log(isShow.value, rootRef.value);
  }
  return { isShow, rootRef, changeShow };
}

2. bei HelloWorld.vue 和链接元素中使用 rootRef.

<script setup lang="ts">
import useShow from "../composables/useShow";

const { rootRef, isShow } = useShow();
</script>

<template>
  <div ref="rootRef" v-show="isShow" class="test"></div>
</template>

3. Erstellen Sie eine Schaltfläche in App.vue und binden Sie die Klickfunktion ein.

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
import useShow from "./composables/useShow";

const { changeShow } = useShow();
</script>

<template>
  <button @click="changeShow">切换</button>

  <HelloWorld />
</template>

Wenn ich auf die Schaltfläche klicke, funktioniert es.

Aber wenn ich es erstelle und aus der Bibliothek importiere, funktioniert es nicht.

Mein vite.config.ts ist wie folgt:

export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },

  build: {
    cssCodeSplit: true,
    sourcemap: true,
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: "my-project",
      fileName: format => `my-project.${format}.js`
    },
    rollupOptions: {
      external: ["vue"],
      preserveEntrySignatures: "strict",
      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
});

Ich denke, das Problem liegt in der Definition von rootRef. Es scheint, dass nur gebundene Positionen verwendet werden können. Dies unterscheidet sich nicht von der Definition in einer Komponente. Ich muss es an mehreren Orten verwenden.

Das Seltsame ist, dass damit die Dev-Umgebung gut funktioniert, die Pro-Umgebung jedoch nicht. Muss ich die Build-Konfiguration von Vite ändern?

Was soll ich tun?

Answer 1

问题是您的 App.vue 使用自己的 composables/useShow 副本，而不是来自库的副本。

解决方案是从库中导出可组合项，以便您的应用程序可以使用相同的可组合项：

// src/index.ts
import { default as useShow } from './composables/useShow';

//...

export default {
  //...
  useShow
};

在 App.vue 中，使用 lib 的可组合项：

import MyProject from "../dist/my-project.es";

const { changeShow } = MyProject.useShow();

GitHub PR