时间:2021-05-28
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 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
使用html-webpack-plugin插件来启动页面可将html页面放入内存以提升页面的加载速度并且还能自动设置index.html页面中JS文件引入的路径
本文介绍了webpack插件html-webpack-plugin的具体使用,分享给大家,具体如下:插件地址:https://pilation.plugin('
标题可能描述不准确,大概就是这么个需求:用Vue-cli搭建一个多入口,多页面的站点,也就是通过html-webpack-plugin插件会生成多个.html文
html-webpack-plugin插件是用于编译Webpack项目中的html类型的文件,如果直接将html文件置于./src目录中,用Webpack打包时
html-webpack-plugin可能用过的webpack的童鞋都用过这个plugin,就算没用过可能也听过。我们在学习webpack的时候,可能经常会看到