vite 2 生產環境引用元素未使用 compostion api 定義

Question

我使用帶有組合 API 的 vue3，但是當我建立專案時，ref 元素始終未定義。

我複製了一下，可能是我用錯了，但我不知道為什麼。

1. 我在 hooks 函數中定義了一個 ref。

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. 在App.vue中建立按鈕並綁定點擊函數。

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

當我點擊按鈕時，它就起作用了。

但是當我建立它並從庫導入時，它不起作用。

我的vite.config.ts如下：

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

我認為問題出在rootRef的定義。看來只有綁定位置才能使用。這與在組件中定義它沒有什麼不同。我需要在多個地方使用它。

奇怪的是，這樣一來，Dev環境可以正常運作，但Pro環境卻無法使用。是否需要修改vite的建置配置？

我該怎麼做？

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

#