vite 2 生产环境引用元素未使用 compostion api 定义-PHP中文网问答

我使用带有组合 API 的 vue3，但是当我构建项目时，ref 元素始终未定义。

我复制了一下，可能是我用错了，但不知道为什么。

我在 hooks 函数中定义了一个 ref。

const isShow = ref(false)
const rootRef = ref();

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

在 HelloWorld.vue 和链接元素中使用 rootRef。

在App.vue中创建按钮并绑定点击函数。

当我点击按钮时，它就起作用了。

但是当我构建它并从库导入时，它不起作用。

我的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的构建配置？

我该怎么做？