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 配置同样）