Fatal编程技术网
  • javascript/
  • Javascript 在使用vue cli 3创建的项目中，在何处查找或如何设置htmlWebpackPlugin.options.title？

Javascript 在使用vue cli 3创建的项目中，在何处查找或如何设置htmlWebpackPlugin.options.title？

javascript vue.js

Javascript 在使用vue cli 3创建的项目中，在何处查找或如何设置htmlWebpackPlugin.options.title？,javascript,vue.js,vue-cli-3,vue-cli-4,Javascript,Vue.js,Vue Cli 3,Vue Cli 4,我想为使用vue cli 3创建的网页设置标题，从而查看public/index.html。在那里，我找到了 如何在vue cli 3项目中设置和修改htmlWebpackPlugin.options.title //vue.config.js module.exports = { chainWebpack: config => { config .plugin('html') .tap(args => {

我想为使用vue cli 3创建的网页设置标题，从而查看
public/index.html
。在那里，我找到了

如何在vue cli 3项目中设置和修改
htmlWebpackPlugin.options.title

//vue.config.js
module.exports = {
    chainWebpack: config => {
        config
            .plugin('html')
            .tap(args => {
                args[0].title = "My Vue App";
                return args;
            })
    }
}
请参见更新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插件配置为不同的页面指定标题
  • 使用环境变量保存应用程序/页面标题。我个人更喜欢并使用这种方法
.env（或任何.env.[mode]）

这就是你在应用程序中的不同位置对它的称呼

AnyComponent.vue（作为数据属性）

TypeScript

appName:string=process.env.VUE\u APP\u NAME
Javascript

appName:process.env.VUE\u APP\u NAME
anyHTML.html

<%= process.env.VUE_APP_NAME %>
如果您使用的是
vue pwa
插件，则
名称
设置在
站点.webmanifest
文件中。

考虑到这个问题的流行程度，我决定添加一个详细的答案和参考，以使其更加真实和完整

思考问题是寻找设置
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>
到

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

4.链接网页包 您可以在
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
lifecycle钩子中执行此操作，或者如果您希望不同路由具有不同的标题，则可以对每个路由加载的组件执行相同的操作

<script>
export default {
  data() {
    return {
      //
    };
  },
  mounted() {
    document.title = 'new title'
  }
}
</script>
结论
前4种解决方案是更改标题的静态方式，或者换句话说，您不能在运行时使用这些方式更改标题。此外，所有这些都不是热重新加载的。最后两个选项使用JavaScript，可以在运行时操作标题。

这可以通过配置。上面的答案非常有效，只需记住重新启动npm或YARNW，为什么不在
index.html
？@jeand'arme中添加
标记？这是相关的SPA逻辑。在每个更改的路由上，标题都被视为changedpackage.json不支持与url不兼容的名称。我正在更新答案以显示更多选项。 
<title>Title of your choice</title>

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

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.

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

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