Vue开发时常见的错误有哪些
今天小编给大家分享一下Vue开发时常见的错误有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
安装超时(install timeout)
can’t not find ‘xxModule’ - 找不到某些依赖或者模块
这种情况一般报错信息可以看到是哪个包抛出的信息.，一般卸载这个模块,安装重新安装下即可.
data functions should return an object
这个问题是 vue 实例内,单组件的data必须返回一个对象;如下
export default {
name: 'page-router-view',
data () {
return {
tabs: [
{
title: '财务信息',
url: '/userinfo'
},
{
title: '帐号信息',
url: '/userinfo/base'
}
]
}
}
}为什么要 return 一个数据对象呢? 官方解释如下: data
必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之,组件复用下,不会造成数据同时指向一处,造出牵一发而动全身的破问题…
给组件内的原生控件添加事件,不生效了
<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子1-->
<el-input placeholder="请输入特定消费金额 " @mouseover="test()"></el-input>
<!--// 错误例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
<!--上面的两个例子都没法触发事件!!!-->
<!--究其原因,少了一个修饰符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
<i :class="['fzicon',item.menuIcon]"></i>
<span>{{item.menuName}}</span>
</router-link>
<!---->我在函数内用了this.xxx=,为什么抛出Cannot set property ‘xxx’ of undefined;
这又是this的套路了，this是和当前运行的上下文绑定的；
一般你在axios或者其他 promise , 或者setInterval 这些默认都是指向最外层的全局钩子.
简单点说:“最外层的上下文就是 window,vue内则是 Vue 对象而不是实例!”;
解决方案:
暂存法: 函数内先缓存 this , let that = this;(let是 es6, es5用 var)
箭头函数: 会强行关联当前运行区域为 this 的上下文;
Uncaught ReferenceError: xxx is not define；
实例内的 data 对应的变量没有声明，你导入模块报这个错误,那一定是导出没写好。
npm run dev 报端口错误!Error: listen EADDRINUSE :::8080
自己用 webpack搭脚手架的都不用我说了;Vue-cli 里面的 webpack 配置: config/index.js
dev: {
env: require("./dev.env"),
port: 8080, // 这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
autoOpenBrowser: true,
assetsSubDirectory: "static",
assetsPublicPath: "/",
proxyTable: {
"/bp-api": {
target: "http://new.d.st.cn",
changeOrigin: true,
// pathRewrite: {
// "^/bp-api": "/"
// }
}
},the “scope” attribute for scoped slots …. replaced by “slot-scope” since 2.5
这个问题只出现老项目升级到 vue2.5+的时候, 提示就是 scope 现在要用 slot-scope 来代替,但是 scope 暂时可以用,以后会移除
单组件中里面的 import xxx from ‘@/components/layout/xxx’中的@是什么
这是 webpack 方面的知识,看到了也说下吧…webpack可以配置alias(也就是路径别名),玩过 linux 或者 mac 都知道。
依旧如上,会自己搭脚手架的不用我说了…看看 vue-cli 里面的;
文件名: build -> webpack.base.conf.js
resolve: {
extensions: [".js", ".vue", ".json"], // 可以导入的时候忽略的拓展名范围
alias: {
vue$: "vue/dist/vue.esm.js",
"@": resolve("src"), // 这里就是别名了,比如@就代表直接从/src 下开始找起!!!
"~": resolve("src/components")
}
},Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.
这种问题一般就是组件内的 props 类型已经设置了接受的范围类型, 而你传递的值却又不是它需要的类型,写代码严谨些 OK?
Unknown custom element: - did you register the component correctly?
组件没有正确引入或者正确使用,依次确认
导入对应的组件
在 components 内声明
在 dom 区域声明标签
Unexpected token: operator xxxxx
大佬,这个一看就是语法错误啊，基本都是符号问题， 一般报错会给出哪一行或者哪个组件。
跨域问题怎么破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
1: CORS , 前后端都要对应去配置,IE10+
2: nginx 反向代理,一劳永逸 <-- 线上环境可以用这个
线下开发模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable这么个玩意, 也可以做接口反向代理。
// 在 config 目录下的index.js
proxyTable: {
"/bp-api": {
target: "http://new.d.st.cn",
changeOrigin: true,
// pathRewrite: {
// "^/bp-api": "/"
// }
}
}
// target : 就是 api 的代理的实际路径
// changeOrigin: 就是是变源,必须是...
// pathRewrite : 就是路径重定向,一看就知道Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
大体就是说,单组件渲染 DOM 区域必须要有一个根元素,不能出现同级元素. 可以用v-if和v-else-if指令来控制其他元素达到并存的状态。
换个直白的解释,就是有一个唯一的父类,包裹者; 比如一个 div(父包含块) 内部多少个同级或者嵌套都行,但是最外层元素不能出现同级元素!
以上就是“Vue开发时常见的错误有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论