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

发现vue-cli创建的HTML里面的title已经换成变量<%= htmlwebpackPlugin.options.title%>，这是在webpack中使用HtmlWebpackPlugin的用法，如下：<title><%= htmlWebpackPlugin.options.title %></title>默认情况下，项目显示的标题为项目路径

高先生的猫

11094人浏览 · 2022-05-19 17:44:57

高先生的猫 · 2022-05-19 17:44:57 发布

发现vue
-cli创建的HTML里面的title已经换成变量<%= htmlwebpack
Plugin.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的方法。