Refresh the page, the title becomes English?

Vue projects package index. HTML mounted to the public directory through VUE-CLI (webpack)

<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
</body>
Copy the code

Solution 1

Directly to % > < % = htmlWebpackPlugin. The options. The title, it directly set the title, abnormal refresh will not have a title, there are several to several.

Not elegant enough?

Solution 2

Title htmlWebpackPlugin values. The options. The title, the literal translation webpack plug-in set the title, so he went to webpack. Config. Js to change, in vue project is vue config. Js

// vue.config.js
module.exports = {
    chainWebpack: config= > {
        config.plugin('html').tap(args= > {
            args[0].title = "app name"
                return args
	})
    }
}
Copy the code

Document. title set in the page?

Add a configuration file

// setting.js
// Export default uses import in vue. Config. js
module.exports = {
    title: 'app name'
}
Copy the code

Then you can introduce it into your project.