如何在Nuxt 3.x中使用Pug？

Question

如果我们通过

npx nuxi init nuxt3-app

创建Nuxt 3应用程序并将

app.vue

的内容从

更改

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

到

<template lang="pug">

  div
    NuxtWelcome

</template>

我们会得到

 ERROR  [unhandledRejection] Cannot find module 'pug'                                                                                                                                                                                                      17:05:54
Require stack:
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\vue\compiler-sfc\index.js
- D:\IntelliJ IDEA\Experiments\nuxt3-app\node_modules\@vitejs\plugin-vue\dist\index.js

我没想到内置的 Pug 支持，但也没有提示如何提供。

据我所知，Nuxt 3 默认设置使用 Vite 而不是 Webpack。也许答案是在 Vite 设置中覆盖？

Answer 1

对于Vite：

1. 安装vite-plugin-pug。 Vite会自动检测到。
2. 重新启动应用程序构建

并小心这个错误。

Answer 2

我知道已经过去一年多了，但我最近遇到了同样的问题并找到了更简单的解决方案。

您只需安装

pug

即可运行。不需要任何插件或其他额外的配置。

以防万一：我使用了

[email protected]

和

[email protected]