总结开发Vue项目中遇到的所有报错和警告
金蝶云社区-honey缘木鱼
honey缘木鱼
37人赞赏了该文章 1,157次浏览 未经作者许可,禁止转载编辑于2018年12月22日 10:58:35

在项目开发过程中,编辑器总是会报各种错误和警告,以下就是我在开发过程中遇到的问题及解决方案。

(1).node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?

      下图所示为报错问题

20181026124241682.png

这是由于css解析的时候出了问题,解决方案为:


首先看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass。

  • 如果是 常规 的,执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行。

  • 如果是 less 的,执行 npm install less less-loader --save-dev 安装依赖就行。

  • 如果是 sass 的,执行 npm install sass sass-loader --save-dev 安装依赖就行。或者($npm intall sass-loader --save ; $npm install node-sass --save)


(2).Cannot find module 'webpack/bin/config-yargs'

 从网上下载的一个vue项目,终端执行:npm run dev 时,报错如下图:

    从上述报错中可以看到,需要安装webpack-cli, 终端输入:npm install webpack-cli,然后在运行就OK!


(3).throw er; // Unhandled 'error' event 和Error: listen EADDRNOTAVAIL 192.168.0.109:8081

  问题报错如下图:

20181027195557273.png

从上图看报错原因可知与ip地址有关,打开配置index.js配置文件

20181027195749988.png

因为host中的ip不是本机IP导致的错误!

解决方法:

  • 1. 把host中的改为“自己电脑的IP地址”

  • 2.改为‘127.0.0.1’

  • 3.改为‘localhost’


(4).This dependency was not found:

报错截图:

屏幕快照 2018-12-17 下午7.00.07.png

根据报错原因想到是路径不对,文件路径为:

A67A6886-261E-4911-B273-8B71F313FEFA.png

引入路径应为:

屏幕快照 2018-12-17 下午7.03.52.png


(5).This dependency was not found: * common/stylus/index.styl in ./src/main.js To install it, you can run: npm install --save common/stylus/index.styl

报错如图:

屏幕快照 2018-12-17 下午7.07.06.png

解决办法是  build\webpack.base.conf.js将 resolve添加

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    
  }
},


(6).Emitted value instead of an instance of Error) Error compiling template: 

屏幕快照 2018-12-17 下午7.20.34.png

很容易发现错误原因:

:maxDistance="50px"

解决方案:

在data中写一变量,赋值变量就可以!


(8).Cannot use v-for on stateful component root element because it renders multiple elements.   

报错如图提示:

3D8DBD01-6A8A-46AB-BC43-08C21AFE51B9.png

 Cannot use v-for on stateful component root element because it renders multiple elements.中文大致意思:不能在根元素(root element)使用 v-for,因为v-for是个循环体呈现多个元素,v-for在根元素上导致无法渲染。


代码如图:


<template>

  <div v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)">

    <a href="java:;" :class="{'active':idx == index}">{{item.name}}</a>

  </div>

</template>


修改后代码:


<div class="contain">

    <div v-for="(item,index) in headerList" v-on:click="selectMainTheme(index)">

      <a href="java:;" :class="{'active':idx == index}">{{item.name}}</a>

    </div>

  </div>


(9).Invalid prop: type check failed for prop "price". Expected String, got Number.

屏幕快照 2018-12-17 下午7.27.38.png

这是因为类型不匹配,解决办法:

bottomDistance=20 改为:bottomDistance=20 OK!


 


文章独发金蝶云社区

赞 37