Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: use the title option in the html template, instead of hard-code the project name #5060

Merged
merged 1 commit into from Jan 13, 2020
Merged

refactor: use the title option in the html template, instead of hard-code the project name #5060

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/@vue/cli-service/generator/template/public/index.html
View file
Open in desktop
Expand Up @@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%%= BASE_URL %%>favicon.ico">
<title><%= rootOptions.projectName %></title>
<title><%%= htmlWebpackPlugin.options.title %%></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= rootOptions.projectName %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%%= htmlWebpackPlugin.options.title %%> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why can't we use projectName from vue.config.js?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rootOptions.projectName is inferred from package.json so it's equivalent to the default title option value set below.

This PR is to make the title element in the template dynamic, so that users can change the page title by configuring html-webpack-plugin. Most common use cases may be in multi-page apps.

I originally thought the title option would be injected into the page by default, like meta tags. But it turns out that users need to place an interpolation expression in the template manually. jantimon/html-webpack-plugin#1302 (comment)

</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Expand Down
1 change: 1 addition & 0 deletions packages/@vue/cli-service/lib/config/app.js
View file
Open in desktop
Expand Up @@ -84,6 +84,7 @@ module.exports = (api, options) => {
}

const htmlOptions = {
title: api.service.pkg.name,
templateParameters: (compilation, assets, pluginOptions) => {
// enhance html-webpack-plugin's built in template params
let stats
Expand Down