vue-loader 是一个 webpack 的 loader，可以将指定格式编写的 Vue 组件转换为 JavaScript模块
同时，vue-loader 支持使用非默认语言，通过设置语言块的lang属性，就可以使用指定的预处理器，比如最常见的sass 语法：
<style lang="sass"> ... </style>
这里重点讨论使用不同的js模板引擎作为预处理器，
下面示例使用了pug模板引擎
<template lang="pug"> div h1 Hello world! </template>
1. 支持哪些模板引擎
v14 或更低版本使用 consolidate 来编译 <template lang="xxx">, 所以支持的模板引擎，从consolidate的中可以找到，包括了大部分引擎，
在vue-loader/preprocessor.js 文件里面，
// loader for pre-processing templates with e.g. pug const cons = require('consolidate') const loaderUtils = require('loader-utils') const { loadOptions } = require('../utils/options-cache') module.exports = function (content) { const callback = this.async() const opt = loaderUtils.getOptions(this) || {} if (!cons[opt.engine]) { return callback( new Error( "Template engine '" + opt.engine + "' " + "isn't available in Consolidate.js" ) ) } // allow passing options to the template preprocessor via `template` option const vueOptions = loadOptions(opt.optionsId) if (vueOptions.template) { Object.assign(opt, vueOptions.template) } // for relative includes opt.filename = this.resourcePath cons[opt.engine].render(content, opt, (err, html) => { if (err) { return callback(err) } callback(null, html) }) }
可以看到，使用consolidate 进行预处理。
v15 及以上版本，允许对vue组件中的每个部分使用其他的webpack loader，可以正常使用各种模板引擎。
使用@vue/component-compiler-utils 工具编译模板，实际在component-compiler-utils中编译template时，也把consolidate作为预处理器，使用consolidate.render编译成字符串。
2. 引入pug
需安装pug-plain-loader，利用它返回一个编译好的 HTML 字符串，
在最新的vue-cli@3.x 配置中，默认已配置好pug的相关loader， 所以安装完可以直接在<template/>中使用，
/* config.module.rule('pug') */ { test: /\.pug$/, oneOf: [ /* config.module.rule('pug').oneOf('pug-vue') */ { resourceQuery: /vue/, use: [ /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */ { loader: 'pug-plain-loader' } ] }, /* config.module.rule('pug').oneOf('pug-template') */ { use: [ /* config.module.rule('pug').oneOf('pug-template').use('raw') */ { loader: 'raw-loader' }, /* config.module.rule('pug').oneOf('pug-template').use('pug-plain') */ { loader: 'pug-plain-loader' } ] } ] },
3. 引入dotjs或其他模板引擎,
需在vue.confg.js 里面手动配置loader, 配置规则跟引入pug类似，修改相关loader即可。
还有一点比较特殊，该模板引擎对应的loader， 必须返回字符串，
比如我们使用dotjs-loader，来解析dotjs模板，就会报错，然后查看dotjs-loader,发现
return 'export default ' + doT.template(source);
最后返回导出结果, doT.template(source)执行成功后，返回一个匿名函数，
所以想要返回最终的字符串，只有传入数据，执行函数 doT.template(source)(data)。
直接使用dotjs-loader无法达到上面的要求，只有修改loader中的返回格式，具体可以参考pug-plain-loader, 逻辑比较简单，传入模板引擎相关参数，options对应webpack 配置中的options参数，最后返回编译后的字符串。
const pug = require('pug') const loaderUtils = require('loader-utils') module.exports = function (source) { const options = Object.assign({ filename: this.resourcePath, doctype: 'html', compileDebug: this.debug || false }, loaderUtils.getOptions(this)) const template = pug.compile(source, options) template.dependencies.forEach(this.addDependency) return template(options.data || {}) }
这里可以发现问题，上面代码中options.data只是在webpack配置时传入的，并不是正式的下发数据，使用预处理模板引擎，为了返回字符串，编译函数执行在loader中进行，没有办法传入数据data，参与编译。
而且模板引擎的相关语法，不能与vue 的模板语法冲突，这样会导致js模板引擎解析后，再进行vue 模板解析时报错