稍等片刻,正在加载中...

vue-cli之项目更改标题,keywords

有的时候我们开发完一个vue-cli项目了,想要修改网站的title,keywordsdescription这几个值怎么修改呢,下面就来介绍一下怎么修改的。

一. 修改vue.config.js

module.exports = {
  chainWebpack: config =>{
      config.plugin('html')
        .tap(args => {
          args[0].title = "title标题";
          args[0].keywords = "keywords内容";
          args[0].description = "description内容";
          return args;
        })
    },
};

二. 更改public/index.html

<!DOCTYPE html>
<html lang="">
  <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">
    <meta name="keywords" content="<%= htmlWebpackPlugin.options.keywords %>">
    <meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <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>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

按照上面的操作即可实现。一切皆往事在此祝福您生活愉快。如果本文解决了您的问题,麻烦点一下赞。好让往事知道此文有用。

posted @ 2021-06-16 19:46  一切皆往事  阅读(1505)  评论(0编辑  收藏  举报