如何整合 vue.config.js

Question

我使用 Vue CLI 3 使用所有默认预设选项创建了一个 Vue 项目。当我运行 Chrome 中的应用使用 vue serve 时，我注意到 head 元素中的元素与 [=16] 中的 head 元素不匹配=] 完全没有。我读到我可以在 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;
        })
    }
}

vue inspect 的 HTMLWebpackPlugin 部分如下所示：

/* 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>

如何整合 vue.config.js

How to integrate vue.config.js

html-webpack-plugin

vuejs2

vue-cli-3