Vue使用中遇到问题汇总（一）32个

1、安装一些需要编译的包：提示没有安装

python

、build失败等

　　因为一些

npm

的包安装需要编译的环境，

mac

和

linux

都还好，大多都齐全 。window 用户依赖

visual studio 的一些库

和

python 2+，

windows的小伙伴都装上：

windows-build-tools

python 2.x

2、

can't not find 'xxModule'

- 找不到某些依赖或者模块

　　这种情况一般报错信息可以看到是哪个包抛出的信息。一般卸载这个模块，安装重新安装下即可。

3、

data functions should return an object

　　这个问题是 Vue 实例内，单组件的

data

必须返回一个对象。

　　为什么要 return 一个数据对象呢？

　　官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！简言之，组件复用下，不会造成数据同时指向一处，造出牵一发而动全身的破问题。

4、给组件内的原生控件添加事件不生效

<!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件-->
<!--// 错误例子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>

<!--明明官方文档有的,一堆人不愿意去看-->
<!--https://cn.vuejs.org/v2/guide/components.html#给组件绑定原生事件-->

5、在函数内用了

this.xxx=

，为什么抛出

Cannot set property 'xxx' of undefined;

　　需要this重定向

　　这又是

this

的套路了

，this

是和当前运行的上下文绑定的。一般你在

axios

或者其他

promise

, 或者

setInterval

这些默认都是指向最外层的全局钩子。简单点说：“最外层的上下文就是

window

，vue内则是 Vue 对象而不是实例!”;

　　解决方案：

　　（1）暂存法：函数内先缓存

this

, let that = this;(let是 es6, es5用 var)

　　（2）箭头函数：会强行关联当前运行区域为 this 的上下文

。

6、为什么我的引入的小图片渲染出来却是

data:image/png;base64xxxxxxxx

　　这个是 webpack 里面的对应插件处理的。对于小于多少 K 以下的图片(规定的格式)直接转为 base64格式渲染；具体配置在

webpack.base.conf.js

里面的 rules里面的

url-loader。

这样做的好处：在网速不好的时候先于内容加载和减少http的请求次数来减少网站服务器的负担。

7、

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(父包含块) 内部多少个同级或者嵌套都行，但是最外层元素不能出现同级元素。

8、跨域问题怎么破!比如

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 : 就是路径重定向,一看就知道

9、为什么我的组件间的样式不能继承或者覆写？

　　单组件开发模式下，请确认是否开启了

CSS

模块化功能。也就是

scoped

(vue-cli 里面配置了，只要加入这个属性就自动启用)

<style lang="scss" scoped></style>

　　为什么不能继承或者覆写呢，那时因为每个类或者 id 乃至标签都会给自动在css后面添加hash。比如

// 写的时候是这个
.trangle{}
// 编译过后,加上了 hash
.trangle[data-v-1ec35ffc]{}

　　这些都是在 css-loader 里面配置。

10、路由模式改为

history

后，除了首次启动首页没报错，刷新访问路由都报错。

　　必须给对应的服务端配置查询的主页面，也可以认为是主路由入口的引导。

　　官方文档也有：传送门 : Vue-Router history Mode

11、

Uncaught ReferenceError: xxx is not define

　　实例内的

data

对应的变量没有声明，你导入模块报这个错误，那绝对是导出没写好，按着导出导入的一个一个去找，绝对能找到问题。

12、

Error in render function:"Type Error: Cannot read property 'xxx' of undefined"

　　这种问题大多都是初始化的姿势不对；比如引入

echart

这些，仔细去了解下生命周期，再来具体初始化。

　　vue 组件有时候也会(嵌套组件或者

props

传递初始化)，也是基本这个问题

13、安装模块时命令窗口输出

unsupported platform xxx

　　一般两种情况

，node

版本不兼容，系统不兼容。解决方案: 要么不装，要么满足安装要求。

14、

Unexpected tab charater

这些

　　一般是你用脚手架初始化的时候开了 eslint ，要么遵循规则，要么改变规则；要么直接把 webpack 里面的 eslint 检测给关闭了。

15、

Failed to mount component: template or render function not defined

　　组件挂载失败，问题只有这么几个：组件没有正确引入、挂载点顺序错了了；自行动手排查。

16、

Unknown custom element: <xxx> - did you register the component correctly?

　　组件没有正确引入或者正确使用，依次确认：

　　（1）导入对应的组件

　　（2）在 components 内声明

　　（3）在 dom 区域声明标签

17、

axios

的

post

请求后台接受不到

　　axios

默认是 json 格式提交，确认后台是否做了对应的支持。

　　若是只能接受传统的表单序列化，就需要自己写一个转义的方法。当然还有一个更加省事的方案，装一个小模块

qs

//安装
npm install qs -S

// 然后在对应的地方转就行了，单一请求也行,拦截器也行，我是写在拦截器的。
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
config => {
// 在发送请求之前做某件事
if (
config.method === "post"
) {
// 序列化
config.data = qs.stringify(config.data); // 这里转义
}

// 若是有做鉴权token , 就给头部带上token
if (localStorage.token) {
config.headers.Authorization = localStorage.token;
}
return config;
},
error => {
Message({
showClose: true,
message: error,
type: "error.data.error.message"
});
return Promise.reject(error.data.error.message);
}
);

18、

Invalid prop: type check failed for prop "xxx". Expected Boolean, got String.

　　这种问题一般就是组件内的

props

类型已经设置了接受的范围类型， 而你传递的值却又不是它需要的类型，写代码严谨些。

19、

this.$set | this.$xxx

这个

$

是个什么意思

　　Vue 的

$

和 jQuery 的

$

并没有半毛钱的关系，就跟

javascript

和

java

一样。

　　Vue 的

$

是封装了一些 vue 的内建函数，然后导出以

$

开头，这显然并不是

jQuery

的专利。

　　jQuery 的

$

是选择器，取得 DOM区域。两者的作用完全不一致。

20、Module not found: Error : Can’t resolve

xxx-loader

in xxxx

　　这里问题一般就是webpack的配置文件你改动了或对应的 loader 没有装上

21、父组件可以直接调用子组件的方法么!

　　可以，通过

$refs

或者

$chilren

来拿到对应的实例，从而操作。

22、

Error in event handler for "click":"xxx"

　　这个问题大多都是你写的代码有问题，你的事件触发了，但是组件内部缺少对应的实现或者变量，所以抛出事件错误。解决方案：看着报错慢慢排查

23、组件的通讯有哪几种？

　　基本最常用的是这三种;

　　（1）父传子:

props

　　（2）子传父:

emit

　　（3）兄弟通讯:

　　1>

event bus

: 就是找一个中间组件来作为信息传递中介

　　2>

vuex

: 信息树

　　传送门：

基本通讯

Vuex

24、既然

localStorage

和

sessionStorage

能做到数据维护，为什么还要引入

vuex

!

　　这个问题问得好，

Vuex

的目的用来维护同级组件间的数据通讯，拥有一个共同的状态树；仅仅活在

SPA

的里面的伪多页(路由)内，这种东东明明然

localStorage

和

sessionStorage

也可以做到，还能做到跨页面数据维护，还不会被浏览器刷新干掉。为什么还要引入

vuex

，我个人觉得原因只有这么一个，“可维护性”和”易用性”，

怎么理解呢?

　　（1）可维护性：因为是单向数据流，所有状态是有迹可循的，数据的传递也可以及时分发响应

　　（2）易用性：它使得我们组件间的通讯变得更强大，而不用借助中间件这类来实现不同组件间的通讯

　　而且代码量不多，若是你要用

ls

或者

ss

，你必须手动去跟踪维护你的状态表，虽说可行，但是代码量会多很多，而且可读性很差。

　　是不是每个项目都需要用到

vuex

?

　　答案是否定的，小型项目上这个反而是累赘，这东西一般是用在中型项目+的，因为里面涉及需要维护的数据比较多，同级组件间的通讯比较频繁。若是用到

vuex

的项目记得结合

ss

或者

ls

来达到某些状态持久化，为什么看下面!

25、vuex的用户信息为什么还要存一遍在浏览器里(sessionStorage or localStorage)

　　因为

vuex

的 store 干不过刷新啊，保存在浏览器的缓存内，若用户刷新的话，值再取一遍呗。

26、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": "/"
// }
}
},

　　原因：8080端口被占用，不轻易关闭被占用的端口，将index.js文件中的port改为其他的端口号即可

　　在一个就是如果你的host是采用ip形式写的话，那么你就要看下你电脑的ip是不是一致的

27、什么时候用

v-if

，什么时候用

v-show

!

　　我们先来说说两者的核心差异：

　　

v-if

：DOM 区域没有生成，没有插入文档，等条件成立的时候才动态插入到页面。

　　有些需要遍历的数组对象或者值，最好用这货控制，等到拿到值才处理遍历，不然一些操作过快的情况会报错，比如数据还没请求到。

　　

v-show

：DOM 区域在组件渲染的时候同时渲染了，只是单纯用 css 隐藏了。

　　对于下拉菜单、折叠菜单这些数据基本不怎么变动，用这个最合适了，而且可以改善用户体验，因为它不会导致页面的重绘，DOM 操作会。

　　简言之：DOM结构不怎么变化的用

v-show

，数据需要改动很大或者布局改动的用

v-if。

28、单组件中里面的

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")
}
},

29、

Failed to compile with x errors : This dependency was not found !

　　编译错误，对应的依赖没找到。

　　解决如下:

　　（1）知道缺少对应的模块，直接装进去

　　（2）若是一个你已经安装的大模块(比如 axios)里面的子模块(依赖包)出了问题，卸载重装整个大模块。因为你补全不一定有用。

30、为什么我的

npm

或者

yarn

安装依赖会生成

lock

文件，有什么用!

　　lock 文件的作用是统一版本号，这对团队协作有很大的作用。若是没有 lock 锁定，根据

package.json

里面的

^

,

~

这些，不同人、不同时间安装出来的版本号不一定一致，有些包甚至有一些

breaking change

(破坏性的更新)，造成开发很难顺利进行!!!

31、我有个复杂组件需要有新增和编辑的功能同时存在，但是字段要保持不变性怎么破

　　字段保持不变性怎么理解呢? 就是说比如新增和编辑同时共享一份

data

。

　　有一种就是路由变了，组件渲染同一个(不引起组件的重新渲染和销毁!)，但是功能却不同(新增和编译)。比如从编辑切到新增

，data

必须为空白没有赋值的，等待我们去赋值。这时候有个东西就特别适合了，那就是immutable-js，这个东西可以模拟数据的唯一性，或者叫做不变性。

32、Vue PC(桌面)端、M(mobile:移动)端，用什么 UI 框架好？

　　PC：推荐的只有两个

element UI

和

iview

　　Mobile：推荐

Vux

　　当然还有很多，但是基本用户的认知度都不高，这三个比较流行