Vue使用中遇到问题汇总（一）32个
1、安装一些需要编译的包：提示没有安装python、build失败等
因为一些 npm 的包安装需要编译的环境，mac 和 linux 都还好，大多都齐全 。window 用户依赖 visual studio 的一些库和python 2+，windows的小伙伴都装上：
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: 信息树
传送门：
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
当然还有很多，但是基本用户的认知度都不高，这三个比较流行
