Как интегрировать vue.config.js

Question

Я создал проект Vue, используя Vue CLI 3, используя все предустановленные параметры по умолчанию. Когда я запускал приложение в Chrome, используя vue serve, я заметил, что элементы внутри элемента head не совпадают с элементами head внутри /public/index.html. Я прочитал, что могу добавить метаэлементы, которые я хочу, в vue.config.js, но когда я запускаю приложение, оно, похоже, не использует этот файл. Мой vue.config.js выглядит так:

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = 'MyApp title';
                args[0].meta = {viewport: 'width=device-width,initial-scale=1,user-scalable=no'};

            return args;
        })
    }
}

И HTMLWebpackPlugin часть vue inspect выглядит так:

/* config.plugin('html') */
new HtmlWebpackPlugin(
  {
    templateParameters: function () { /* omitted long function */ },
    template: '/*path-to-project-root*/node_modules/@vue/cli-service/lib/config/index-default.html'
  }
)
...

... похоже, он даже не указывает на /public/index.html.

Я действительно не знаю, где искать дальше, любая помощь будет оценена.

Answer 1

Вы можете установить метаданные из компонентов страницы

<script>
head () {
    return {
      title: 'my title,
      meta: [
          { hid: 'description', name: 'description', content: 'my description' }
      ]
    }
</script>