前端开发--vue开发部分报错指南

前期开发过程中

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

解决： Add v-if 做判断
Uncaught TypeError: Cannot set property 'innerHTML' of undefined

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

’<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>

路由相关报错
启动项目后控制台报错 Error occured while trying to proxy to: localhost:8002/admin/info

确定node-sass 安装没报错

 + 浏览器清空缓存并硬性加载或关闭重启浏览器清除http 缓存

GET http://localhost:8000/__webpack_hmr 连接被中断刷新一下就好了

打包编译过程中

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

解决： npm i node-sass -D
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开发部分报错指南的更多相关文章

[Git] 拉开发分支的代码报错
Git拉开发分支的代码报错: fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed ...
解决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,重启 ...
vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题
vue解决启动报错cjs loader.js Error: Cannot find module '../config'问题今天下载了一个开源项目一直运行不了,折腾了半天才找到问题所在,config ...
Vue自定义指令报错：Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
vue.config.js报错cannot set property "preserveWhitespace" of undefined
vue.config.js报错cannot set property "preserveWhitespace" of undefined 最近在项目中配置webpack,由于vue ...
vue项目启动报错 spawn cmd ENOENT errno: -4058
vue项目启动报错 spawn cmd ENOENT errno: -4058 运行vue项目(npm run dev)报错提示 'npm' 不是内部或外部命令 cmd输入node -v 有版本号 ...
wepy开发小程序eslint报错error 'getApp' is not defined no-undef
wepy开发小程序使用getApp().globalData保存全局数据很方便,但是会在控制台看到很多报错:“error 'getApp' is not defined no-undef”,这是esl ...
Eclipse + Pydev开发Python时import报错解决方法
一. 原文链接:http://blog.csdn.net/lhanchao/article/details/51306626 用eclipse +PyDev开发python时, ...
iOS开发-url包括中文报错解决的方法
常常, 我们用通过这个方案调用API. NSString* urlString = [NSString stringWithFormat:@"http://api.douban.com/v2 ...

随机推荐

samtools faidx
$ samtools faidx t1.fa && echo "faidx built" $ cat t1.fa.fai scaffold332 scaffold3 ...
Java枚举的作用和用法
从没有枚举的时代说起在枚举出现之前,如果想要表示一组特定的离散值,往往使用一些常量.例如: [Java] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 ...
3DSMAX安装失败，如何卸载修复重新安装3dmax 2017？
一些同学安装3dmax出错了,也有时候想重新安装3dmax的时候会出现这种本电脑已安装3dmax,你要是不留意直接安装,只会按装3dmax的附件,3dmax是不会按装上的.这种原因呢就是大家在之前卸载 ...
Linux中的AutoHotKey键映射替代方案
Windows--AutoHotKey 初次了解AutoHotKey,是在Win下最爱效率神器: AutoHotKey | 晚晴幽草轩这篇博客中,博主有对AutoHotKey作详细介绍,这里不在赘余. ...
mongoDB连接信息及生成对应的collection生成代码
.net,个人封装MONGODDB的操作. using System; using System.Collections.Generic; using System.Linq; using Syste ...
Android ListView 常用技巧总结
本文对 ListView 中的一些常用技巧做一个总结.附:虽然现在 RecyclerView 已逐渐取代 ListView,但实际情况是大部分项目中还在使用 ListView.当然,后续我会在我的博客 ...
简单了解char和varchar的区别
一.CHAR和 VARCHAR的区别? 1.CHAR有固定的长度,VARCHAR属于可变长度的字符类型. 2.比如,写入内容到CHAR(10)里,如果内容占用的空间不够10,则会用空格字符补足. 二. ...
Time Machine 备份mac系统
USB外接移动硬盘的方式来熟悉Time Machine,体会它带给我们的便利.O(∩_∩)O~~通过USB连接移动硬盘到MacBook Pro,如图所示 2 将移动硬盘连接到 Mac 时,系统有时会询 ...
流量全球第4的Reddit到底是一个怎样的网站？
对于喜欢NBA的我来说,Reddit是经常接触的一个网站.或者说,很多关于NBA的最新消息都是从Reddit上传出来的.值得一提的是,NBA版块在Reddit所有版块中用户活跃程度排名第三,也是体育版 ...
Python---6条件判断与循环
条件判断计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...

前端开发--vue开发部分报错指南

前期开发过程中

打包编译过程中

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

随机推荐

热门专题