bug大集
外卖项目中
1.商品列表页中,使用better-scroll 实现滚动菜单,, 出现报错“Failed to resolve directive: el”
错误原因：
这是因为v-el在vue2.x以后被淘汰。使用新的标签ref替换v-el，下面是修改的方法。v-el:menu-wrapper改为 ref="menuWrapper"
2.使用mock模拟后台数据, 没有找到dev-server.js文件 ,
错误原因：
最新的vue里dev-server.js被替换成了webpack-dev-conf.js
设置{{ seller.supports.length}}个会报错
Error in render: "TypeError: Cannot read property 'length' of undefined"
改为{{ seller.supports !== undefined && seller.supports.length}}个 >就不会报错
错误原因：
无数据为undefined的，所以找不到 seller.supports.length
安装项目框架出现
Module build failed: Error: ENOENT: no such file or directory, scandir 'D:\study\pangs\node_modules\node-sass\vendor'
解决方案是执行以下方法：
npm rebuild node-sass
vue 自适应使用sass 的时候会报错
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...
sass-loader的版本过高导致的编译错误，当前最高版本是8.x，需要退回到7.3.1
运行：
npm uninstall sass-loader（卸载当前版本）
npm install [email protected] --save-dev
2、如果上面的方法不行，或者又产生其他相关的错误，可以尝试一下在webpack.base.config.js里面添加：
//报错信息:缺少响应头设置
//Access to XMLHttpRequest at 'http://api.douban.com/v2/movie/top250' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域解决:开发阶段解决方案(本地测试):
(1)方案一:Chrome浏览器关闭跨域限制
原理:
跨域是浏览器的限制，可以通过设置关闭这个限制
步骤 设置
1 打开Chrome文件所在位置
2 右键Chrome程序创建快捷方式，重新命名，如Chrome_debug
3 右键点击Chrome_debug，打开属性，在目标(T)原本的内容+空格+如下后缀指令
4 复制文件绝对路径到浏览器运行，没有跨域问题
注意:
1.后缀代码: --disable-web-security --user-data-dir=C:\MyChromeDevUserData
2.Chrome浏览器设置允许跨域仅用于本地测试，上线让后端一定要开启跨域.
3.最后跟的路径C:\MyChromeDevUserData，是支持跨域的Chrome保存用户信息的位置，可以修改.
开启支持跨域之后,Chrome为了安全，会为这个快捷方式分配一个独立的保存空间，与原本不支持跨域的Chrome分开.
2)方案二:vue处理跨域(用vue开发的时候):
步骤 设置
1 脚手架开启一个服务器:http://localhost:8080/index
2 http-proxy-middleware 配置 把 接口地址 转发到 服务器地址
5.跨域解决:上线解决方案
(1)方案一:JSONP
原理:
用script标签的src属性去访问跨域接口，服务器代码中，先接收你提交的函数名，然后在响应体里，返回一个调用这个函数的JS语法，并将JSON数据转换成对象当参数
示例代码:
划重点:
Ⅰ.如果支持JSONP的接口，需要你传入一个函数，键叫callback.
Ⅱ.能不能用JSONP要看服务器接口支不支持，那我们怎么知道支持不支持？就是看文档，没文档就试一下就知道.
Ⅲ.优点:兼容性极好，只要支持script标签就行
Ⅳ.缺点:只能发get请求，数据大小有限制
(2)方案二:CORS
原理:
服务器告诉浏览器，我这个接口所有网站都可以访问，由后端来设置!
示例代码:
//PHP接口地址文件设置