Elemen rujukan persekitaran pengeluaran Vite 2 tidak ditakrifkan menggunakan api kompos

Question

Saya menggunakan vue3 dengan API komposisi, tetapi apabila saya membina projek, elemen ref sentiasa tidak ditentukan.

Saya menyalinnya, mungkin saya salah menggunakannya, tetapi saya tidak tahu mengapa.

1. Saya menentukan ref dalam fungsi cangkuk.

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. di 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. Buat butang dalam App.vue dan ikat fungsi klik.

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

Apabila saya mengklik butang, ia berfungsi.

Tetapi apabila saya membinanya dan mengimport dari perpustakaan, ia tidak berfungsi.

vite.config.ts saya adalah seperti berikut:

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

Saya rasa masalahnya terletak pada definisi rootRef. Nampaknya hanya posisi terikat boleh digunakan. Ini tidak berbeza daripada mentakrifkannya dalam komponen. Saya perlu menggunakannya di beberapa tempat.

Perkara yang pelik ialah dengan ini, persekitaran Dev berfungsi dengan baik, tetapi persekitaran Pro tidak. Adakah saya perlu mengubah suai konfigurasi binaan vite?

Apa yang perlu saya lakukan?

Answer 1

Masalahnya ialah salinan App.vue 使用自己的 composables/useShow anda, bukan salinan dari perpustakaan.

Penyelesaian adalah untuk mengeksport komposit daripada perpustakaan supaya aplikasi anda boleh menggunakan komposit yang sama:

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

//...

export default {
  //...
  useShow
};

Dalam App.vue, gunakan komposable lib:

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

const { changeShow } = MyProject.useShow();

GitHub PR