设置浏览器icon

文件结构
在这里插入图片描述
vue.config.js中设置：
注：vue.config.js是vue-cli的配置文件，可选，可参考：全局-cli-配置
pwa: {
    iconPaths: {
      favicon32: './favicon.ico',
      favicon16: './favicon.ico',
      appleTouchIcon: './favicon.ico',
      maskIcon: './favicon.ico',
      msTileImage: './favicon.ico'
动态设置页面title
 
参考文章：
 聊聊 Vue 中 title 的动态修改 
方法一：router改document.title
 
在router.js中写 
const defaultTitle = 'home'; 
router.beforeEach((to, from, next) => {
  document.title = to.meta.title ? to.meta.title : defaultTitle;
  next();
方法二：使用vue-meta插件
 
可改多个页面meta，有利于SEO,实现较为优雅
 参考文章：vuex结合vue-meta实现router动态设置meta标签
 使用：
 先install插件，
 npm install vue-meta
 MAC中好像需要 sudo cnpm install vue-meta
 (npm 和 cnpm 都行啦，看自己的网速快慢) 
在main.js中 
import Meta from 'vue-meta';
Vue.use(Meta);
new Vue({
  el: '#app',
  router,
  metaInfo () {
    return {
      title: 'home页',  // 在这里直接用了同一个title，如果每个页面的title不一样，参考上述链接中的做法
  render: h => h(app)
其他问题：
 
刷新时仍然会显示Vue App 

 
 这是由于配置文件vue.config.js中配置有问题，默认重新生成一个index.html
 我加了pages项，默认以自定义的index.html为模板
 参考文章：如何配置 vue-cli 3.0 的 vue.config.js 
 pages: {
    index: {
      // entry for the pages
      entry: 'src/main.js',
      // the source template
      template: 'src/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: '首页',
      // chunks to include on this pages, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    // subpage: ''
文档结构：
  
最上面说的动态修改页面title是指，比如我打开了一篇文章，页面的title相应的变成那篇文章的题目；打开另一篇是另一篇的题目，like this:
 
                    文章目录设置浏览器icon设置页面title方法一：router改document.title方法二：使用vue-meta插件总结：设置浏览器icon启用了pwa:参考文章：vue3.0设置浏览器icon文件结构vue.config.js中设置：注：vue.config.js是vue-cli的配置文件，可选，可参考：全局-cli-配置pwa: {    iconPaths: {...
        favicon32: 'favicon.png',
        favicon16: 'favicon.png',
        appleTouchIcon: 'favicon.png',
        maskIcon: 'favicon.png',
Vue.directive('title', {
  inserted: function (el, binding) {
    document.title = el.dataset.title
2. app.vue
				VUE3中，网页图标默认使用的是VUE自带的一个ico的图标，也是VUE的logo。那么作为我们自己开发的项目，如何自定义修改网页的图标和标题呢？很简单，下面就介绍一下。
1 标题修改
标题修改直接在项目的 /public/index.html中修改title标签即可。
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
				发现vue
-cli创建的HTML里面的title已经换成变量<%= htmlwebpack
Plugin.options.title%>，这是在webpack中使用HtmlWebpackPlugin的用法，如下：
<title><%= htmlWebpackPlugin.options.title %></title>
默认情况下，项目显示的标题为项目路径对应的名称，下面介绍修改htmlWebpackPlugin.options.title对应...
				Vue 2.0 和 Vue 3.0 之间有许多不同之处。下面是一些主要的差异：
1. 性能提升：Vue 3.0 通过重构内部代码和使用新的技术，如代码分离、虚拟 DOM 重构、静态编译等，实现了性能的显著提升。
2. 语法改变：Vue 3.0 中有一些语法上的改变，例如 template 标签被替换成了 <script type="text/x-template">，以及新增了一些语法糖，如可选的箭头函数绑定和组件的 setup 函数。
3. 新的响应式实现：Vue 3.0 使用了新的响应式实现，这使得它更加灵活，同时也更加快速。它使用了一个新的叫做 Proxy 的 JavaScript 内置对象，这使得 Vue 可以在不使用 getter/setter 的情况下实现响应式。
4. 全新的编译器：Vue 3.0 使用了一个全新的编译器，这使得它可以更快速地将模板编译成可执行的代码。
5. 新的路由器：Vue 3.0 中包含了一个全新的路由器，它提供了更多的功能和更好的性能。
6. 可插拔的组件：Vue 3.0 中的组件可以被更容易地插入和替换，这使得 Vue 应用程序更加灵活。