Vue：.vue 模板中无法识别 pug 语言

Posted 2023-02-22

【中文标题】Vue：.vue 模板中无法识别 pug 语言

【英文标题】：Vue: pug language has not been recognized in .vue template

【发布时间】：2018-12-06 23:51:28

【问题描述】：

来自 Vue documentation：

处理模板有点不同，因为大多数 webpack 模板加载器（例如 pug-loader）返回模板函数 一个已编译的 html 字符串。而不是使用 pug-loader，我们可以 安装原版哈巴狗。

TestComponent.vue：

<template lang="pug">
  div
    h2  message 
</template>

<script>
  export default 
    data () 
      return 
        message: 'Done!!! Done...'
      
    
  
</script>

ma​​in.js：

import Vue from 'vue'
import TestComponent from './../components/TestComponent/TestComponent.vue'

new Vue(
  el: '#app',
  render: h => h(TestComponent)
);

错误：

NonErrorEmittedError: (Emitted value instead of an instance of Error) 
  Error compiling template:

  div
    h2  message 

  - Component template requires a root element, rather than just text.

使用的依赖版本：

“webpack”：“^4.7.0” “vue”：“^2.5.16” “vue-loader”：“^15.2.4”， "vue-template-compiler": "^2.5.16", “哈巴狗”：“^2.0.3”

【问题讨论】：

安装pug-loader:github.com/pugjs/pug-loader

它在the documentation 中说你需要使用pug-plain-loader

注意：您提供的documentation link 用于 vue-loader v14，但您使用的是 v15。

【参考方案1】：

您需要设置 Webpack 以使用 Pug 语言加载器，否则您的模板将被解析为 HTML，并且您的模板确实为 HTML 没有根标记（围绕所有其他元素的单个 html 元素）。

您需要进行设置：https://www.npmjs.com/package/pug-loader

根据您可能还需要的评论：https://www.npmjs.com/package/pug-plain-loader

【讨论】：

@TakesiTokugawaYD 我有同样的问题，但是所有建议的加载器都安装了它们各自的规则似乎没有解决它。规则是否需要进入 vue 加载器测试下的“选项”？

@PeterT，没有。请参考this working config（对于 webpack 4.X.X）。

@TakesiTokugawaYD 啊，谢谢。我意识到我的问题是我使用的是 electron-webpack，并且每个 webpack 规则的自定义修改是每个模块的，所以我只将 pug 规则应用于 main webpack 条目而不是 renderer。