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