Vue CLI是一個基于Vue.js快速開發的完整系統，提供了腳手架搭建、依賴管理、熱重載、代碼優化等一系列開發所需的工具。
在Vue CLI 3.0版本中，新增了head配置項，用于自定義HTML頭部信息。默認情況下，Vue CLI會自動生成以下頭部信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Vue App</title>
<link rel="icon" href="/favicon.ico">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>我們可以通過在項目根目錄下創建vue.config.js文件，并在其中添加如下配置項，來自定義HTML頭部信息：
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'My App'
args[0].meta = { viewport: 'width=device-width,initial-scale=1.0' }
args[0].link = [
{ rel: 'icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
]
return args
})
}
}在上述配置中，我們通過使用Webpack的chainWebpack方法，對Vue CLI默認生成的HTML頭部信息進行了修改。其中，我們添加了自定義的title、meta和link標簽，來滿足不同的需求。通過這種方式，我們可以很方便地自定義HTML頭部信息，并且不會影響到Webpack的默認打包行為。
下一篇gin接收json