bug合集

bug1

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

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参数设置

最后我发现是比平时多一个文件


找到之后删除或者注释掉里面的配置，之后依赖就可以运行了

bug2

数据想要写入localStorage缓存一直报错

  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

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

问题代码

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

 <ul>
          <!-- {{item.isFinished}} -->
          <!--未完成-->
          <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)
}

bug5

让人头大
全局加载组件后，在页面中调用一直提示这样的错误信息

在异步加载的方法二中，先注册组件然后创建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

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

var babelpolyfill = require('babel-polyfill')

3. 在main.js中直接导入

import 'babel-polyfill'