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: , //  这里，若是这个端口已经给系统的其他程序占用了，需要改掉
    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

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