如何通过html-webpack-plugin调整页面？

本文共计343个文字，预计阅读时间需要2分钟。

在Vue CLI 2.X中，修改`config`目录下的`index.js`文件，可以动态设置。以下是一个简化的修改示例：

javascriptconst title='1'; // 或者 '2' 或 '3'

module.exports={ title: title, dev: { // ... 配置项 }, build: { // ... 配置项 }, test: { // ... 配置项 }};

通过这种方式，你可以在`webpack.dev.conf.js`中直接引用`title`变量。

vue-cli2.X：修改config目录下index.js

const title = '标题1' // const title = '标题2' // const title = '标题3' module.exports = { title: title, dev: { ... }, build: { ... }, test: { ... }

接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpackPlugin使用config.title

new HtmlWebpackPlugin({ title: config.title, ... }),

最后在index.html使用

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

如果项目需要根据title有不同的布局可以在main.js引入config并设置为全局变量

const config = require('../config/index') new Vue({ el: '#app', router, components: { App }, template: '<App/>', data () { return { title: config.title } } })

vue文件中通过$root.title使用即可，这样打包的时候只要切换config目录下的index一处地方就好了，不必多处修改降低出错概率。

vue-cli3.X：很简单，只要vue.config.js中配置

configureWebpack: config => { return { title: title, resolve: { alias: { '@': resolve('src') } }, plugins: [] } } }

public目录下的index.html使用

<title><%= webpackConfig.title %></title>

到此这篇关于html-webpack-plugin修改页面的title的方法的文章就介绍到这了,更多相关html-webpack-plugin修改页面的title 内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！