vue-cli3 配置自定义html模板

2,442 阅读2分钟

前言

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 配置一样)