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. pugconst 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 模板解析時報錯
如果只是純靜態頁面，可以直接把需要經過模板引擎編譯的內容部分抽離出去，使用require引入時，webpack會自動對應loader，解析完成后，只需在當前組件中傳入data，通過v-html把生成的字符串當成HTML標簽解析后輸出。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
