下面是“vue-cli3配置favicon.ico和title的流程”的完整攻略。

1. 配置favicon.ico

在Vue CLI 3中，如果要设置自定义网站标识图标（favicon.ico），需要按照以下步骤进行操作：

在项目根目录下创建一个名为public的文件夹；
在public文件夹中放置一个名为favicon.ico的文件，该文件即为自定义的网站标识图标；
在项目根目录下的vue.config.js文件中进行配置，如下示例：

module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].favicon = './public/favicon.ico'
      return args
    })
  }
}

上述配置中，通过chainWebpack函数可以获取到webpack配置对象config，在该对象上通过plugin函数可以获取到html插件的配置，最后将favicon属性配置为对应的favicon.ico文件的路径即可完成配置。如果自定义的网站标识图标文件名不是favicon.ico，则需要将上述示例代码中的文件名修改为对应的文件名。

示例1：

如果在public文件夹下还需要存放其他的静态资源，如图片、样式文件等，可以通过修改vue.config.js文件中publicPath属性来配置静态资源的访问路径，如下：

module.exports = {
  publicPath: '/my-app/',
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].favicon = './public/favicon.ico'
      return args
    })
  }
}

上述示例中，将publicPath属性配置为/my-app/，则所有静态资源的访问路径都会加上该前缀，即访问自定义的网站标识图标的路径为/my-app/favicon.ico。如果不需要配置静态资源的访问路径，则可以不进行该配置。

2. 配置title

Vue CLI 3中支持在public/index.html文件中配置页面的<title>标签，可以直接在该标签中输入要显示的页面标题。如果需要在组件中动态设置页面标题，则需要通过Vue Router提供的路由钩子函数来实现。

下面是两个示例，分别演示了如何在<title>标签中设置静态标题和如何在组件内动态设置页面标题：

示例2：

在public/index.html文件中设置页面标题：

<!DOCTYPE html>
<html>
  <head>
    <title>My Website Title</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

上述示例中，在<title>标签中设置了静态的页面标题My Website Title。

示例3：

在组件内动态设置页面标题，可以通过Vue Router提供的路由钩子函数来实现。首先，在router.js文件中定义路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: 'Home Page'
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  document.title = to.meta.title
  next()
})

export default router

上述示例中，在Router构造函数中定义了一个meta属性，该属性用于存放各个路由的元信息，其中定义了title属性，该属性的值为当前路由对应的页面标题。在beforeEach路由钩子函数中，通过document.title属性动态设置<title>标签内容为当前路由的title属性值。

接着，在组件中使用Vue Router提供的this.$router对象来获取当前路由的信息，进而获取当前页面的标题，如下所示：

<template>
  <div class="about">
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: ''
    }
  },
  created () {
    this.title = this.$route.meta.title
  }
}
</script>

上述示例中，在组件的created生命周期函数中，通过this.$route.meta.title属性获取当前路由对应的页面标题，并将页面标题赋值给data属性title，以在模板中显示出来。

以上就是设置Vue CLI 3网站页面标题和网站标识图标的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue-cli3配置favicon.ico和title的流程 - Python技术站

vue-cli3配置favicon.ico和title的流程

1. 配置favicon.ico

2. 配置title

相关文章