集成条件编译库(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