无法集成条件编译库（Vue3、ifdef）

Question

我需要为我的项目使用条件编译，我正在尝试安装这个名为 ifdef-loader 的库。我知道设置需要一个 webpack.config.json 文件，该文件在我的 Vue 环境中丢失。经过研究，我发现可以使用 vue.config.json 代替。我在我的项目目录中创建了这个文件并使用了这个设置：

const opts = {
    DEBUG: true,
    version: 3,
    "ifdef-verbose": true,                 // add this for verbose output
    "ifdef-triple-slash": false,           // add this to use double slash comment instead of default triple slash
    "ifdef-fill-with-blanks": true,         // add this to remove code with blank spaces instead of "//" comments
    "ifdef-uncomment-prefix": "// #code "  // add this to uncomment code starting with "// #code "
 };
 
module.exports = { 
    configureWebpack: {
        test: /\.tsx?$/, 
        exclude: /node_modules/, 
        use: [
           { loader: "ts-loader" }, 
           { loader: "ifdef-loader", options: opts } 
        ]
    },
    
 }

我如何在我的代码中使用该库。使用布尔值显示/隐藏某些文本的非常简单的示例：

<template>
  <p>Lorem ipsum dolor sit amet.</p>
  // #if name
    <p>Lorem ipsum dolor sit.</p>
  // #endif
</template>

<script>
export default {
  name: 'App',
  setup() {
    const name = "example"

    return {
      name
    }
  }
}
</script>

但是，在我的应用程序中什么都没有发生， /// 条件代码只是显示为没有功能的普通文本。

不确定我是否设置正确，但我真的很感激一些指针。

Answer 1

看看这个库，它允许有条件的预处理：

js-conditional-compile-loader