Quasar2/Vue3应用程序中是否允许使用Quasar CLI的Vite选项缩放pug模板



我正在尝试使用Pug作为Quasar2/Vue3框架中的模板语言,该框架由Quasar CLI使用Vite选项构建。

在IndexPage.vue组件中,我刚刚更改了:

<template>
<q-page class="flex flex-center">
<b3> Hello from Counters! <b3>
</q-page>
</template>

带有

<template lang="pug">
q-page.flex
b3 Hello from Counters!
</template>

我在下面得到了一个看起来像是转发器管道错误的东西。

为了在模板中使用Pug,我必须恢复使用webpack来构建Quasar2/Vue3应用程序吗?

(node:6364) UnhandledPromiseRejectionWarning: Error: Cannot find module 'pug' Require stack:
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@vuecompiler-sfcdistcompiler-sfc.cjs.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modulesvuecompiler-sfcindex.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@vitejsplugin-vuedistindex.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@quasarapp-vitelibconfig-tools.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@quasarapp-vitelibmodesspaspa-config.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@quasarapp-vitelibmodesspaspa-devserver.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@quasarapp-vitelibcmddev.js
- C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@quasarapp-vitebinquasar
- C:UsersrobinadminAppDataRoamingnpmnode_modules@quasarclibinquasar
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
-appnode_modules@vuecompiler-sfcdistcompiler-sfc.cjs.js:1495:5
at new Promise (<anonymous>)
at promisify (C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@vuecompiler-sfcdistcompiler-sfc.cjs.js:1488:10) at Function.exports.pug.render (C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@vuecompiler-sfcdistcompiler-sfc.cjs.js:2358:10) at preprocess (C:UsersrobinadminDocumentsTeachingUniversalCountersVolatileQuasarPugJsquasar-pug-js-counters-starter-appnode_modules@vuecompiler-sfcdistcompiler-sfc.cjs.js:3150:18) (Use `node --trace-warnings ...` to show where the warning was created)(node:6364) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)(node:6364) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

从Quasar框架讨论论坛得到了答案。我错误地认为Pug是与Quasar一起安装的,因为lang=pug在Vue SFC的语法文档中显示为一个选项。但事实并非如此。所以一个人需要做:npm i-D pug或纱加D pug。它就像一个符咒!

最新更新