vue-cli3的title标签中出现的htmlWebpackPlugin.options.title值进行修改

发现vue-cli创建的html里面的title已经换成变量<%=  htmlWebpackPlugin.options.title   %>，这是在webpack中使用HtmlWebpackPlugin的用法，如下：

<title><%= htmlWebpackPlugin.options.title %></title>

默认情况下，项目显示的标题为项目路径对应的名称，下面介绍修改htmlWebpackPlugin.options.title对应的值。

vue-cli3脚手架的项目下，在根目录的vue.config.js中添加如下代码：

chainWebpack: config => {
    config
    .plugin('html')
    .tap(args => {
        args[0].title = '你的标题'
        return args
    })},

假如没有这个文件的话，在根目录创建一个，webpack在打包的时候会自动扫描是否有这个文件，并将其中的内容与已经设置好的webpack内容合并。

module.exports = {
	outputDir: 'dist', //build输出目录
	publicPath: './', //相对路径
	productionSourceMap: false,
	assetsDir: 'assets', //静态资源目录
	lintOnSave: false, //是否开启eslint
	devServer: {
		port: 8300, //端口
	},
	lintOnSave: false,
	chainWebpack(config) {
		config.plugin('html').tap((args) => { //标题
			args[0].title = '项目的标题';
			return args;
		})
	},
}

熟悉webpack的应该知道这是在webpack中使用HtmlWebpackPlugin的用法

plugins: [ 
  // plugins 的配置 
  // html-webpack-plugin 
  // 功能：默认会创建一个空的 HTML，自动引入打包输出的所有资源（JS/CSS） 
  // 需求：需要有结构的 HTML 文件 
  new HtmlWebpackPlugin({ 
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS） 
    template: './src/index.html' 
  }) 
],

但是vue并不希望我们直接操作webpack的配置文件，这样容易产生冲突，所以采用了一种chainWebpack的方法。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_11537