前期开发过程中

  1. [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined”.

    解决: Add v-if 做判断

  2. Uncaught TypeError: Cannot set property 'innerHTML' of undefined

所有报这些关于dom操作的api错误 多半都是v-if(ng-if). dom display none ; 没事 可以改之前show 先显示下

  1. ’<template>' cannot be keyed. Place the key on real elements instead.

    出现这种情况是vue的不正确写法:
          <template v-for="{item, index} in 5" :key="index">
<the-list-item />
</template>

就会报错如下: ’<template>' cannot be keyed. Place the key on real elements instead.

意思是: :key不能用于模板标签 修改:

          <template v-for="{item, index} in 5" >
<the-list-item :key="index"/>
</template>
  1. 路由相关报错

  2. 启动项目后控制台报错 Error occured while trying to proxy to: localhost:8002/admin/info

  • 确定node-sass 安装没报错

    
+ 浏览器清空缓存并硬性加载 或关闭重启浏览器 清除http 缓存
  1. GET http://localhost:8000/__webpack_hmr 连接被中断 刷新一下就好了

打包编译过程中

  1. nodejs 升级后, vue+webpack 项目 node-sass 报错的解决方法

    解决: npm i node-sass -D

  2. build打包编译报错 Vue build faild

此次报错参考文章

  • 项目编译报错与解决过程如下:
➜  jbcmVideo git:(oahcoay) ✗ npm run build

> jbcm_video@1.0.0 build /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo
> node build/build.js ⠋ building for production.../Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^ TypeError: Cannot read property 'compilation' of undefined
at OptimizeCssAssetsWebpackPlugin.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170:20)
at Compiler.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/webpack/lib/webpack.js:33:19)
at err (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/build/build.js:19:3)
at next (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:75:7)
at CB (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:111:9)
at /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:137:14
at FSReqWrap.oncomplete (fs.js:182:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jbcm_video@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jbcm_video@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbookpro/.npm/_logs/2019-05-12T06_48_19_784Z-debug.log ➜ jbcmVideo git:(oahcoay) ✗ npm i uglifyjs-webpack-plugin@1.0.0 --save
npm WARN css-loader@2.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optimize-css-assets-webpack-plugin@5.0.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. + uglifyjs-webpack-plugin@1.0.0
added 5 packages and updated 3 packages in 12.301s
➜ jbcmVideo git:(oahcoay) ✗ npm run build > jbcm_video@1.0.0 build /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo
> node build/build.js ⠋ building for production.../Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^ TypeError: Cannot read property 'compilation' of undefined
at OptimizeCssAssetsWebpackPlugin.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170:20)
at Compiler.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/webpack/lib/webpack.js:33:19)
at err (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/build/build.js:19:3)
at next (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:75:7)
at CB (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:111:9)
at /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:137:14
at FSReqWrap.oncomplete (fs.js:182:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jbcm_video@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jbcm_video@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbookpro/.npm/_logs/2019-05-12T06_50_56_664Z-debug.log
➜ jbcmVideo git:(oahcoay) ✗ npm install --save-dev last-call-webpack-plugin
npm WARN css-loader@2.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optimize-css-assets-webpack-plugin@5.0.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. + last-call-webpack-plugin@3.0.0
updated 1 package in 18.718s
➜ jbcmVideo git:(oahcoay) ✗ npm run build > jbcm_video@1.0.0 build /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo
> node build/build.js ⠋ building for production.../Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170
compiler.hooks.compilation.tap(
^ TypeError: Cannot read property 'compilation' of undefined
at OptimizeCssAssetsWebpackPlugin.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/last-call-webpack-plugin/src/index.js:170:20)
at Compiler.apply (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/tapable/lib/Tapable.js:375:16)
at webpack (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/webpack/lib/webpack.js:33:19)
at err (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/build/build.js:19:3)
at next (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:75:7)
at CB (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:111:9)
at /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/rimraf/rimraf.js:137:14
at FSReqWrap.oncomplete (fs.js:182:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jbcm_video@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jbcm_video@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbookpro/.npm/_logs/2019-05-12T06_53_52_260Z-debug.log
➜ jbcmVideo git:(oahcoay) ✗ npm i optimize-css-assets-webpack-plugin@2 --save
npm WARN css-loader@2.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optimize-css-assets-webpack-plugin@2.0.0 requires a peer of cssnano@>=3.4.0 but none is installed. You must install peer dependencies yourself. + optimize-css-assets-webpack-plugin@2.0.0
added 3 packages, removed 162 packages, updated 1 package and moved 1 package in 13.777s
➜ jbcmVideo git:(oahcoay) ✗ npm run build
> jbcm_video@1.0.0 build /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo
> node build/build.js internal/modules/cjs/loader.js:596
throw err;
^ Error: Cannot find module 'cssnano'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at new OptimizeCssAssetsPlugin (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/node_modules/optimize-css-assets-webpack-plugin/index.js:12:33)
at Object.<anonymous> (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/build/webpack.prod.conf.js:55:5)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
at Module.load (internal/modules/cjs/loader.js:612:32)
at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
at Function.Module._load (internal/modules/cjs/loader.js:543:3)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo/build/build.js:12:23)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jbcm_video@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the jbcm_video@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in:
npm ERR! /Users/macbookpro/.npm/_logs/2019-05-12T06_54_59_772Z-debug.log
➜ jbcmVideo git:(oahcoay) ✗ npm i cssnano --save-dev
npm WARN css-loader@2.1.1 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself. + cssnano@4.1.10
added 163 packages in 17.227s
➜ jbcmVideo git:(oahcoay) ✗ npm run build > jbcm_video@1.0.0 build /Users/macbookpro/Downloads/workspace/jbcm/jbcmVideo
> node build/build.js ⠹ building for production...
Starting to optimize CSS...
Processing static/css/app.68b3855e3d311999d47299118cadee89.css...
⠸ building for production...Processed static/css/app.68b3855e3d311999d47299118cadee89.css, before: 464096, after: 430542, ratio: 92.77%
Hash: e2174f907aebed0c2609
Version: webpack 3.12.0
Time: 44457ms
Asset Size Chunks Chunk Names
static/img/jbcmlogo.49e7f84.png 10.5 kB [emitted]
static/img/BRAND.5081ccf.png 17.6 kB [emitted]
static/fonts/element-icons.732389d.ttf 56 kB [emitted]
static/img/banner01.07a23d1.png 1.78 MB [emitted] [big]
static/img/jbdxlogo2.970286b.png 13.5 kB [emitted]
static/img/tupian@2x.4d07db2.png 327 kB [emitted] [big]
static/img/icon_xiangxia.8364a0d.png 17.9 kB [emitted]
static/img/公众号二维码.4fee8ce.png 25.7 kB [emitted]
static/img/class_picture.7cf7ac2.png 276 kB [emitted] [big]
static/img/course-desc.190c153.png 847 kB [emitted] [big]
static/fonts/element-icons.535877f.woff 28.2 kB [emitted]
static/img/jbdxlogo.0535093.png 15.7 kB [emitted]
static/js/vendor.9944116eb145567d2a7b.js 1.36 MB 0 [emitted] [big] vendor
static/js/app.49cd273013387c8d38fa.js 178 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js 857 bytes 2 [emitted] manifest
static/css/app.68b3855e3d311999d47299118cadee89.css 431 kB 1 [emitted] [big] app
static/js/vendor.9944116eb145567d2a7b.js.map 5.44 MB 0 [emitted] vendor
static/js/app.49cd273013387c8d38fa.js.map 557 kB 1 [emitted] app
static/css/app.68b3855e3d311999d47299118cadee89.css.map 667 kB 1 [emitted] app
static/js/manifest.2ae2e69a05c33dfc65f8.js.map 4.97 kB 2 [emitted] manifest
index.html 927 bytes [emitted] Build complete. Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work. —— build success;

前端开发--vue开发部分报错指南的更多相关文章

  1. [Git] 拉开发分支的代码报错

    Git拉开发分支的代码报错: fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed ...

  2. 解决vue安装less报错Failed to compile with 1 errors的问题

    1.创建vue项目后安装less,执行 npm install less less-loader --save-dev 下载版本为:less-loader@6.1.0 , less@3.11.3,重启 ...

  3. vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题

    vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题 今天下载了一个开源项目一直运行不了,折腾了半天才找到问题所在,config ...

  4. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  5. vue.config.js报错cannot set property "preserveWhitespace" of undefined

    vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...

  6. vue项目启动报错 spawn cmd ENOENT errno: -4058

    vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错 提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号 ...

  7. wepy开发小程序eslint报错error 'getApp' is not defined no-undef

    wepy开发小程序使用getApp().globalData保存全局数据很方便,但是会在控制台看到很多报错:“error 'getApp' is not defined no-undef”,这是esl ...

  8. Eclipse + Pydev开发Python时import报错解决方法

    一.  原文链接:http://blog.csdn.net/lhanchao/article/details/51306626            用eclipse +PyDev开发python时, ...

  9. iOS开发-url包括中文报错解决的方法

    常常, 我们用通过这个方案调用API. NSString* urlString = [NSString stringWithFormat:@"http://api.douban.com/v2 ...

随机推荐

  1. 传输层TCP和UDP

    TCP协议        传输控制协议        TCP是面向连接.可靠的进程到进程通信的协议        TCP提供全双工工服务,即数据可在同一时间双向传输        三次握手:      ...

  2. Ho|H1|p-value|p值与U值|单侧检验

    生物统计学 统计推断的过程: Ho:XXXX会发生 H1:XXXX不会发生 p:XXXX会发生的概率(概率计算过程),如果是小概率,则H0不可能发生,所以拒绝H0接受H1. 概率计算过程:先设定小概率 ...

  3. JavaScript秒转换成天-小时-分钟-秒

    根据时间秒转换成天-小时-分钟-秒 // 秒转换成day.hour.minutes.seconds formatSecond(second: number) { const days = Math.f ...

  4. Nginx笔记总结九:Nginx日志配置

    ngx_http_log_module用来定义请求日志格式1. access_log指令 语法:   access_log path [format [buffer=size [flush=time] ...

  5. js 实现排序算法 -- 归并排序(Merge Sort)

    原文: 十大经典排序算法(动图演示) 归并排序 归并排序是建立在归并操作上的一种有效的排序算法.该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得 ...

  6. 关于Synchornized,Lock,AtomicBoolean和volatile的区别介绍

    1.  volatile 变量可以被看作是一种 "程度较轻的 synchronized". 2.  Lock 实现提供了比使用 synchronized 方法和语句可获得的更广泛的 ...

  7. 通过samus驱动实现基本数据操作

    传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成,MongoDB是由(database).集合(collection).文档对象(documen ...

  8. 我们为什么不愿意相信AI?

    人工智能--即AI已经变得越来越聪明,甚至能够预测未来.比如警察可以用AI来提前预判出犯罪的时间或地点,医生可以用AI预测病人最有可能心脏病发作或是中风.甚至研究人员还试图为AI添加上更多的想象力,因 ...

  9. Kafka常用命令及配置文件

    创建topic,指定备份分区数 bin/kafka-topics.sh --create --zookeeper zk:2181 --replication-factor 2 --partitions ...

  10. 工业界 vs. 学术界: 一个年轻员工的视角

    本文发表于<中国计算机学会通讯>2015年第5期,转载已获得授权 作者:菲利普·郭 (Philip Guo),美国罗切斯特大学助理教授 译者:​王长虎,微软亚洲研究院主管研究员 如果你即将 ...