在哪里可以找到或如何在使用 vue cli 3 创建的项目中设置 htmlWebpackPlugin.options.title？

Question

我想为我使用 vue cli 3 创建的网页设置标题，因此查看了public/index.html. 在那里，我发现<title><%= htmlWebpackPlugin.options.title %></title>.

htmlWebpackPlugin.options.titlevue cli 3 项目中如何设置和修改？

Answer 1

vue.config.js在根目录创建一个文件

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}

见https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

Answer 2

考虑到这个问题的受欢迎程度，我决定添加一个详细的答案和参考资料，使其更加真实和完整。我也创建了一篇文章关于这个主题和覆盖在这个主题这个和这个课程。

思想问题是找设置 htmlWebpackPlugin.options.title，最终的效果是改变网页的标题。

1.最方便最简单的解决方案

最简单的方法是修改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">
    <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>

这是public/index.htmlvue cli 生成的默认值。而在这一点上，你只需要改变

    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>

到

<title>Title of your choice</title>

2.更改name字段package.json

另一个简单的解决方案是更改"name": "your-project-name". 但是，name您可以在package.json. 您可以在此处阅读更多相关信息。基本上，package.json必须包含一个名称，并且必须是小写和一个单词，并且可以包含连字符和下划线。

3. 使用pages字段vue.config.js

vue.config.js是一个可选文件，您可以添加该文件以向 Vue CLI 提供其他配置，并且此文件（如果存在）将由 Vue CLI 自动加载。您需要vue.config.js在根文件夹中创建- 包含您package.json文件的文件夹。

根据Vue 文档，您可以使用 pages 字段来定义多页应用程序的入口点。但是，您也可以使用它来定义单页应用程序的标题。vue.config.js在根目录中创建并将pages字段添加到您的导出中，如下所示：

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/main.js',
      title: 'My Title',
    },
  }
}

请注意，如果您已经在运行开发服务器，则只有在您停止并重新启动开发服务器时才会反映此更改。换句话说，这些更改不会被热重载。

4. 链接 Webpack

你可以链的WebPack中vue.config.js，如下图所示

module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}
Note that similar to solution 3, this change will be reflected only when you stop and restart the development server, in case you are already running development server. In other words, these changes will not be hot reloaded.

5. 使用 JavaScript 修改生命周期钩子中的标题

列表中的下一个解决方案是使用 JavaScript 修改标题。您可以在mounted根组件的生命周期钩子中执行此操作，或者如果您想要不同路由的不同标题，您可以对每个路由加载的组件执行相同的操作。

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>

6. 使用 Vue Meta

最后，您可以使用Vue Meta来管理 Vue 应用程序的所有元数据，包括标题。首先，您需要将 Vue Meta 添加到您的项目中，然后使用metaInfo如下所示的字段为您的页面或路由配置元数据。

{
  metaInfo: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { title: 'My title'}
    ]
  }
}

结论

前 4 个解决方案是更改标题的静态方法，换句话说，您无法使用这些方法在运行时更改标题。此外，所有这些都不是热重载的。最后 2 个选项使用 JavaScript，可以在运行时操作标题。

Answer 3

更新package.json文件中的name属性

{
  "name": "URL-friendly_app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

更新：上述方法仅在您使用 URL 友好标题时才有效。

还有其他几种方法可以做到

• 从Vuejs官方文档页面配置，可以使用html插件配置为不同页面指定标题
• 使用环境变量Modes 和 Environment Variables来保存您的应用程序/页面标题。我个人更喜欢并使用这种方法。

.env（或任何 .env.[mode]）

VUE_APP_NAME=Application flixible name

这就是您在应用程序的不同位置调用它的方式

AnyComponent.vue（作为数据属性）

打字稿

{
  "name": "URL-friendly_app-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Javascript

VUE_APP_NAME=Application flixible name

任何HTML.html

<%= process.env.VUE_APP_NAME %>