Les éléments de référence de l'environnement de production Vite 2 ne sont pas définis à l'aide de l'API de composition

Question

J'utilise vue3 avec l'API de composition, mais lorsque je construis le projet, l'élément ref est toujours indéfini.

Je l'ai copié, peut-être que je l'ai mal utilisé, mais je ne sais pas pourquoi.

1. J'ai défini une référence dans la fonction hooks.

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. à 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. Créez un bouton dans App.vue et liez la fonction de clic.

<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>

Quand je clique sur le bouton, cela fonctionne.

Mais lorsque je le construis et l'importe depuis la bibliothèque, cela ne fonctionne pas.

Mon vite.config.ts est le suivant :

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"
        }
      }
    }
  }
});

Je pense que le problème réside dans la définition de rootRef. Il semble que seules les positions liées puissent être utilisées. Ce n'est pas différent de le définir dans un composant. Je dois l'utiliser à plusieurs endroits.

Ce qui est étrange, c'est qu'avec cela, l'environnement Dev fonctionne bien, mais pas l'environnement Pro. Dois-je modifier la configuration de build de vite ?

Que dois-je faire ?

Answer 1

Le problème c'est votre App.vue 使用自己的 composables/useShow copie, pas celle de la bibliothèque.

La solution est d'exporter les composables depuis la bibliothèque afin que votre application puisse utiliser les mêmes composables :

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

//...

export default {
  //...
  useShow
};

Dans App.vue, utilisez les composables de lib :

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

const { changeShow } = MyProject.useShow();

RP GitHub