vue-cli3 配置自定義html模板

前言

vue-cli3 推崇的是零配置，其配置方式和 vue-cli2 有很是大的變化。

如何配置自定義的html模板？

配置自定義html模板

錯誤配置

好比我想用 velocityjs 模板：

STEP1：自定義 velocityjs 模板

開發環境文件夾，根目錄下新建 /loader/velocityHtmlLoader.js ，代碼以下：

const velocity = require('velocityjs')

// 獲取參數
const getParameter = (name, path) => {
  var regexS = '[\\?&]' + name + '=([^&#]*)'
  var regex = new RegExp(regexS)
  var results = regex.exec(path)

  if (results === null) return ''
  else return results[1]
}


module.exports = function(content) {
  const obj = {
    isWebp: true
  }
  const json = JSON.parse(getParameter('json', this.query)) // 這裏json是傳遞的一個參數
  Object.assign(obj, json)
  const html = velocity.render(content, obj, {}) // velocity解析html頁面，返回string

  return 'module.exports =' + JSON.stringify(html) // 這裏必定要用JSON.stringifg(xx) 不然會報錯
}
複製代碼

STEP2：配置 vue.config.js

// ./src/units/loader/velocityHtmlLoader.js! 是我本地寫的html解析文件
 ...
 pages: {
    index: {
      entry: 'src/index/main.js', // page 的入口
      //template: 'public/index.html', // 官方配置 - 模板來源
      template: './loader/velocityHtmlLoader.js!public/index.html', // 換成 velocity-html-loader
      filename: 'index.html', // 在 dist/index.html 的輸出
      title: 'Index Page',
      chunks: ['index']
    }
  }
 ...
 ...

複製代碼

按照vue-cli2的方式配置，發現這種配置沒用，視乎是哪裏不對。

錯誤緣由

本着刨根問底的內心，我去看了一遍源碼，發現 node_modules/@vue/cli-service/lib/confg/app.js 有一個明顯的BUG

api.resolve 這個方法只能識別'public/index.html'這樣的路徑，且未使用html-webpack-pulgin

正確配置

STEP1：自定義 velocityjs 模板

略，上面有

STEP2：配置 vue.config.js

...
  ...
  /** * @note 配置 chainWebpack * @params pages 頁面對象， 支持多頁面配置 { index: { entry: 'src/index/main.js', // page 的入口 //template: 'public/index.html', // 官方配置 - 模板來源 template: './loader/velocityHtmlLoader.js!public/index.html', // 換成 velocity-html-loader filename: 'index.html', // 在 dist/index.html 的輸出 title: 'Index Page', chunks: ['index'], skinConfig: {...} }， acticity: { ... } } * @params json 須要傳遞的參數，若是不用刻意刪掉，支持這種方式傳參 */
  chainWebpack: config => {
    Object.keys(pages).forEach(key => {
      config.plugin(`html-${key}`).tap(args => {
        if (!args || args.length === 0) return args
        args[0].template = `./loader/velocityHtmlLoader.js?json=${pages[key].skinConfig}!${args[0].template}`
        return args
      });
    });
    
    ...
    ...
  }
  
  ...
  ...
複製代碼

總結

下一篇會介紹如何靈活配置 entry （就像 vue-cli2 配置同樣）