bug合集

阳光穿透心脏的1/2处 2023-06-13 04:44 16阅读 0赞

### bug1 ###

Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]  
vue引入依赖以后报错，查看其他人所说的是在主目录结构下添加：

创建`postcss.config.js`文件，添加如下代码：（引入autoprefixer插件）

module.exports = { 
      plugins: { 
        'autoprefixer': { browsers: 'last 5 version'}
      }

查询之后：

> Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。
> 
> 把Autoprefixe添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

最后我发现是比平时多一个文件  
![在这里插入图片描述][20191113220820654.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
找到之后删除或者注释掉里面的配置，之后依赖就可以运行了

### bug2 ###

数据想要写入localStorage缓存一直报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

addStorage() { 
          console.log(typeof this.message);//object
          //写入缓存
          Storage.setStorage("load", JSON.stringfy(this.message));
        }

查了很多资料，发现JSON.parse()里面的类型只能是字符串String类型，于是检测了一下，发现我的数据`this.message`是object类型  
检查了很多遍后发现：原来是在设置缓存的时候,get里面应该为返回json对象，我设置的是字符串,可是为什么返回字符串就报错，返回json对象就能通过，跟上面说的不就矛盾了？？？迷惑！！

getStorage(key) { 
            return JSON.stringfy(localStorage.getItem(key));
        }

修改后不报错

getStorage(key) { 
            return JSON.parse(localStorage.getItem(key));
        }

> 总之就记住获取时要字符串转json，设置时要json转字符串！！

### bug3 ###

![在这里插入图片描述][20191119215446571.png]

> 这个问题原因是两个v-for元素处在同一个父元素下，分开就好了；

问题代码

> 注意这里是一个ul里面的两个li分别使用了v-for循环

<ul>
              
              
              <p>未完成事项</p>
              <li v-for="(item,index) in message" :key="index">
                <template v-if="!item.isFinished">
                  <input @click="changeStatus(index)" type="checkbox" :checked="item.isFinished" />
                  <span>{ { item.title}}</span>
                  <button @click="delbtn(index)">删除</button>
                </template>
              </li>
              
              <p>已完成事项</p>
              <li v-for="(item,index) in message" :key="index">
                <template v-if="item.isFinished">
                  <input @click="changeStatus(index)" type="checkbox" :checked="item.isFinished" />
                  <span>{ { item.title}}</span>
                  <button @click="delbtn(index)">删除</button>
                </template>
              </li>
            </ul>

拆分开就好了，以下：

<ul>
              <p>未完成事项</p>
              <li v-for="(item,index) in message" :key="index">
                <template v-if="!item.isFinished">
                  <input @click="changeStatus(index)" type="checkbox" :checked="item.isFinished" />
                  <span>{ { item.title}}</span>
                  <button @click="delbtn(index)">删除</button>
                </template>
              </li>
              </ul>
    
                
              <ul>
              <p>已完成事项</p>
              <li v-for="(item,index) in message" :key="index">
                <template v-if="item.isFinished">
                  <input @click="changeStatus(index)" type="checkbox" :checked="item.isFinished" />
                  <span>{ { item.title}}</span>
                  <button @click="delbtn(index)">删除</button>
                </template>
              </li>
            </ul>

### bug4 ###

> cnpm run dev报错 ,`resolve is not defined`  
> 之前运行都不会报错，不知道为什么，百度后说添加一个辅助函数，结果就解决了

function resolve(dir) { 
      return path.join(__dirname, dir)
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]

### bug5 ###

让人头大  
全局加载组件后，在页面中调用一直提示这样的错误信息  
![在这里插入图片描述][20191121001818944.png]  
在异步加载的方法二中，先注册组件然后创建vue对象就可以了

//参数含义：组件名称，回调函数
    Vue.component("header-title", (resolve) => { 
      setTimeout(() => { 
        require(['./components/header.vue'], resolve)
      }, 1000);
    });
    new Vue({ 
      el: '#app',
      render: h => h(App)
    })

### bug6 ###

直接使用asycn异步函数报错

vue.esm.js?c5de:1897 ReferenceError: regeneratorRuntime is not defined

解决办法为

1.  安装babel支持es6的拓展包

cnpm install babel-polyfill --save-dev

1.  在配置文件webpack.config.js最上方引入

var babelpolyfill = require('babel-polyfill')

1.  在main.js中直接导入

import 'babel-polyfill'

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019111322045416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191113221051994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191113220820654.png]: https://img-blog.csdnimg.cn/20191113220820654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019111322084721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191119213930472.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191119215446571.png]: https://img-blog.csdnimg.cn/20191119215446571.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191120155530504.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[20191121001818944.png]: https://img-blog.csdnimg.cn/20191121001818944.png