Vue Cli生成的Html文件<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
</html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# <%= BASE_URL %>是什么语法，又代表什么意思呢？
1.<%=%>是ejs模板语法,使用ejs模板语法是为了能够在html文件中使用js变量。 2.Vue CLI 3.3 之前的版本，BASE_URL 对应的是 vue.config.js中的 baseURl 字段，vue CLI 3.3 之后（包括3.3）的版本，对应的是publicPath。 publicPath 中的这个 / 代表的是打包之后静态资源的路径，也就是说代表的是打包后 dist文件夹的路径。
# htmlWebpackPlugin是什么？
html-webpack-plugin 的作用是：当使用 webpack打包时，创建一个 html 文件，并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。
# 使用自定义模版生成 html 文件
如果默认的 html 模版不能满足业务需求， 比如需要生成文件里提前写一些 css 'js' 资源的引用， 最简单的方式就是新建一个模版文件， 并使用 template 属性指定模版文件的路径，html-webpack-plugin 插件将会自动向这个模版文件中注入打包后的 js 'css' 文件资源。
vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title= '你想设置的title名字'
return args
})
}
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
这个是写在vue.config.js中的，假如没有这个文件的话，在根目录创建一个，webpack在打包的时候会自动扫描是否有这个文件，并将其中的内容与已经设置好的webpack内容合并。
如果不配置的话，默认读取package.json的name值。
# 熟悉webpack的应该知道这是在webpack中使用HtmlWebpackPlugin的用法
webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: 'My App',
template: 'public/index.html'
})
]
1
2
3
4
5
6
2
3
4
5
6
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
<link src="xxx/xxx.css">
</head>
<body>
</body>
</html>
复制代码
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
使用自定义的模版接收
HtmlWebpackPlugin中定义的title需要使用<%= htmlWebpackPlugin.options.title %>