webpack 修改title_html-webpack-plugin修改页面的title的方法

fe842ae41263b93833740371aac75ba6.png

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有不同的布局可以在main.js引入config并设置为全局变量

const config = require("../config/index")

new Vue({

el: "#app",

router,

components: { App },

template: "",

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使用

原文链接:


版权声明:本文为weixin_30538719原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。