Question

我使用所有默认预设选项，使用Vue CLI 3创建了一个Vue项目。当我使用vue serve在Chrome中运行该应用程序时，我注意到head元素内的元素根本与head内的/public/index.html元素不匹配。我读到可以在vue.config.js中添加所需的meta元素，但是当我运行该应用程序时，它似乎并没有使用该文件。我的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的{{1}}部分看起来像这样：

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' } ) ...。

我真的不知道接下来要去哪里，我们将不胜感激。

Answer 1

您可以在页面组件内设置元数据

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

如何整合vue.config.js

1 个答案: