(编辑:jimmy 日期: 2024/10/31 浏览:2)
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>