前言

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

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

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

cnpm : 國(guó)內(nèi)對(duì)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è)問(wèn)題是 vue 實(shí)例內(nèi),單組件的data必須返回一個(gè)對(duì)象;如下

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

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

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

<!--比如用了第三方框架,或者一些封裝的內(nèi)置組件; 然后想綁定事件-->
<!--// 錯(cuò)誤例子1-->
<el-input placeholder="請(qǐng)輸入特定消費(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è)例子都沒(méi)法觸發(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)都是指向最外層的全局鉤子.

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

解決方案:

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

Uncaught ReferenceError: xxx is not define；

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

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

自己用 webpack搭腳手架的都不用我說(shuō)了;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è)問(wèn)題只出現(xiàn)老項(xiàng)目升級(jí)到 vue2.5+的時(shí)候, 提示就是 scope 現(xiàn)在要用 slot-scope 來(lái)代替,但是 scope 暫時(shí)可以用,以后會(huì)移除

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

這是 webpack 方面的知識(shí),看到了也說(shuō)下吧…webpack可以配置alias(也就是路徑別名),玩過(guò) linux 或者 mac 都知道。
依舊如上,會(huì)自己搭腳手架的不用我說(shuō)了…看看 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 下開(kāi)始找起!!!
      "~": resolve("src/components")
    }
},

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

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

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

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

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

Unexpected token: operator xxxxx

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

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

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

線下開(kāi)發(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: 就是是變?cè)?必須是...
// pathRewrite : 就是路徑重定向,一看就知道

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

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

寫在最后

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

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

最新評(píng)論