前言

大家好，上一期的Vue實(shí)戰(zhàn)都閱讀了嗎？上一期主要是講解了Vue2中父子組件如何進(jìn)行通信，通過父子組件通信我們可以把一些繁瑣簡單的工作抽離出來封裝成組件，以便與我們更好書寫代碼。
相信大家在實(shí)際開發(fā)當(dāng)中也會各種各樣的控制臺報(bào)錯(cuò)，今天博主就為大家總結(jié)一些，大家還有其他的也可以在評論區(qū)補(bǔ)充哦。

安裝超時(shí)(install timeout)

在我們拿到新項(xiàng)目npm install下載依賴的時(shí)候，經(jīng)常會報(bào)的一個(gè)錯(cuò)誤，方案有這么些:

cnpm : 國內(nèi)對npm的鏡像版本
cnpm website: https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org
// cnpm 的大多命令跟 npm 的是一致的,比如安裝,卸載這些
yarn 和 npm 改源大法
//使用 nrm 模塊 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org
當(dāng)然條件允許的話可以上一些科技哈哈哈

can’t not find ‘xxModule’ - 找不到某些依賴或者模塊

這種情況一般報(bào)錯(cuò)信息可以看到是哪個(gè)包拋出的信息.，一般卸載這個(gè)模塊,安裝重新安裝下即可.

data functions should return an object

這個(gè)問題是 vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對象;如下

export default {
  name: 'page-router-view',
      data () {
      return {
        tabs: [
          {
            title: '財(cái)務(wù)信息',
            url: '/userinfo'
          },
          {
            title: '帳號信息',
            url: '/userinfo/base'
          }
        ]
      }
    }
}

為什么要 return 一個(gè)數(shù)據(jù)對象呢? 官方解釋如下: data
必須聲明為返回一個(gè)初始數(shù)據(jù)對象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。如果 data
仍然是一個(gè)純粹的對象，則所有的實(shí)例將共享引用同一個(gè)數(shù)據(jù)對象！簡言之,組件復(fù)用下,不會造成數(shù)據(jù)同時(shí)指向一處,造出牽一發(fā)而動全身的破問題…

給組件內(nèi)的原生控件添加事件,不生效了

<!--比如用了第三方框架,或者一些封裝的內(nèi)置組件; 然后想綁定事件-->
<!--// 錯(cuò)誤例子1-->
<el-input placeholder="請輸入特定消費(fèi)金額 " @mouseover="test()"></el-input>
<!--// 錯(cuò)誤例子2-->
<router-link :to="item.menuUrl" @click="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!--上面的兩個(gè)例子都沒法觸發(fā)事件!!!-->
<!--究其原因,少了一個(gè)修飾符 .native-->
<router-link :to="item.menuUrl" @click.native="toggleName=''">
  <i :class="['fzicon',item.menuIcon]"></i>
  <span>{{item.menuName}}</span>
</router-link>
<!---->

我在函數(shù)內(nèi)用了this.xxx=,為什么拋出Cannot set property ‘xxx’ of undefined;

這又是this的套路了，this是和當(dāng)前運(yùn)行的上下文綁定的；

一般你在axios或者其他 promise , 或者setInterval 這些默認(rèn)都是指向最外層的全局鉤子.

簡單點(diǎn)說:“最外層的上下文就是 window,vue內(nèi)則是 Vue 對象而不是實(shí)例!”;

解決方案:

暫存法: 函數(shù)內(nèi)先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數(shù): 會強(qiáng)行關(guān)聯(lián)當(dāng)前運(yùn)行區(qū)域?yàn)?this 的上下文;

Uncaught ReferenceError: xxx is not define；

實(shí)例內(nèi)的 data 對應(yīng)的變量沒有聲明，你導(dǎo)入模塊報(bào)這個(gè)錯(cuò)誤,那一定是導(dǎo)出沒寫好。

npm run dev 報(bào)端口錯(cuò)誤!Error: listen EADDRINUSE :::8080

自己用 webpack搭腳手架的都不用我說了;Vue-cli 里面的 webpack 配置: config/index.js

dev: {
    env: require("./dev.env"),
    port: 8080, //  這里這里,若是這個(gè)端口已經(jīng)給系統(tǒng)的其他程序占用了.改我改我!!!!!!
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/bp-api": {
        target: "http://new.d.st.cn",
        changeOrigin: true,
        // pathRewrite: {
        //   "^/bp-api": "/"
        // }
    }
},

the “scope” attribute for scoped slots …. replaced by “slot-scope” since 2.5

這個(gè)問題只出現(xiàn)老項(xiàng)目升級到 vue2.5+的時(shí)候, 提示就是 scope 現(xiàn)在要用 slot-scope 來代替,但是 scope 暫時(shí)可以用,以后會移除

單組件中里面的 import xxx from ‘@/components/layout/xxx’中的@是什么

這是 webpack 方面的知識,看到了也說下吧…webpack可以配置alias(也就是路徑別名),玩過 linux 或者 mac 都知道。
依舊如上,會自己搭腳手架的不用我說了…看看 vue-cli 里面的;
文件名: build -> webpack.base.conf.js

resolve: {
    extensions: [".js", ".vue", ".json"], // 可以導(dǎo)入的時(shí)候忽略的拓展名范圍
    alias: {
      vue$: "vue/dist/vue.esm.js",  
      "@": resolve("src"),  // 這里就是別名了,比如@就代表直接從/src 下開始找起!!!
      "~": resolve("src/components")
    }
},

Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.

這種問題一般就是組件內(nèi)的 props 類型已經(jīng)設(shè)置了接受的范圍類型, 而你傳遞的值卻又不是它需要的類型,寫代碼嚴(yán)謹(jǐn)些 OK?

Unknown custom element: - did you register the component correctly?

組件沒有正確引入或者正確使用,依次確認(rèn)

導(dǎo)入對應(yīng)的組件
在 components 內(nèi)聲明
在 dom 區(qū)域聲明標(biāo)簽

Unexpected token: operator xxxxx

大佬,這個(gè)一看就是語法錯(cuò)誤啊，基本都是符號問題， 一般報(bào)錯(cuò)會給出哪一行或者哪個(gè)組件。

跨域問題怎么破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

1: CORS , 前后端都要對應(yīng)去配置,IE10+
2: nginx 反向代理,一勞永逸 <-- 線上環(huán)境可以用這個(gè)

線下開發(fā)模式,比如你用了vue-cli, 里面的 webpack 有引入了proxyTable這么個(gè)玩意, 也可以做接口反向代理。

// 在 config 目錄下的index.js
proxyTable: {
  "/bp-api": {
    target: "http://new.d.st.cn",
    changeOrigin: true,
    // pathRewrite: {
    //   "^/bp-api": "/"
    // }
  }
}

// target : 就是 api 的代理的實(shí)際路徑
// changeOrigin: 就是是變源,必須是...
// pathRewrite : 就是路徑重定向,一看就知道

Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx

大體就是說,單組件渲染 DOM 區(qū)域必須要有一個(gè)根元素,不能出現(xiàn)同級元素. 可以用v-if和v-else-if指令來控制其他元素達(dá)到并存的狀態(tài)。
換個(gè)直白的解釋,就是有一個(gè)唯一的父類,包裹者; 比如一個(gè) div(父包含塊) 內(nèi)部多少個(gè)同級或者嵌套都行,但是最外層元素不能出現(xiàn)同級元素!

寫在最后

這篇文章分析那個(gè)了一些vue開發(fā)比較常見的報(bào)錯(cuò)，你是否也經(jīng)歷過呢？后續(xù)會為小伙伴們持續(xù)更新Vue的一些實(shí)戰(zhàn)小魔法！

到此這篇關(guān)于Vue實(shí)戰(zhàn)之項(xiàng)目開發(fā)時(shí)常見的幾個(gè)錯(cuò)誤匯總的文章就介紹到這了,更多相關(guān)Vue項(xiàng)目開發(fā)常見錯(cuò)誤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論