Vuejs2 如何在index.html中生成文件后更改最初生成的标题
我已从web下载了vue.js模板。每当我通过npm构建文件时，index.html上的标题总是被替换为模板的名称。有没有办法更改默认标题？正如我理解你的问题-你需要像这样配置你的Vuejs2 如何在index.html中生成文件后更改最初生成的标题,vuejs2,Vuejs2,我已从web下载了vue.js模板。每当我通过npm构建文件时，index.html上的标题总是被替换为模板的名称。有没有办法更改默认标题？正如我理解你的问题-你需要像这样配置你的vue.config.js文件（请注意Webpack部分）这些文件来自于正在工作的项目，因此你可以最大限度地理解它在结尾时的表现方式 module.exports = { baseUrl: '/', outputDir: (process.env.NODE_ENV === 'production' ?
vue.config.jsWebpackmodule.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
vue.config.jsindex.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<title><%= htmlWebpackPlugin.options.title %></title>
index.htmlargs[0].title希望这能有所帮助。我还是VueJS的新手，但以下是我的发现。我想要任何建议的选择或改进。我选择了选项2 选项1：设置为多页模式 vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
<script>
export default {
title: 'Foo Page'
}
</script>
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
<script>
export default {
title: 'Foo Page'
}
</script>
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
导出默认值{
标题：“富页”
}
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
导出默认值{
标题（）{
返回`Foo Page-${this.someValue}`
},
数据（）{
返回{
someValue:“酒吧”
}
}
}
/public/index.html<title><%= htmlWebpackPlugin.options.title %></title>
<title><%= htmlWebpackPlugin.options.title %></title>
document.titlevue.config.js