vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于Vue實戰(zhàn)之項目開發(fā)時常見的幾個錯誤匯總的相關(guān)資料,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

前言
安裝超時(install timeout)
can’t not find ‘xxModule’ - 找不到某些依賴或者模塊
data functions should return an object
給組件內(nèi)的原生控件添加事件,不生效了
我在函數(shù)內(nèi)用了this.xxx=,為什么拋出Cannot set property ‘xxx’ of undefined;
Uncaught ReferenceError: xxx is not define；
npm run dev 報端口錯誤!Error: listen EADDRINUSE :::8080
the “scope” attribute for scoped slots …. replaced by “slot-scope” since 2.5
單組件中里面的 import xxx from ‘@/components/layout/xxx’中的@是什么
Invalid prop: type check failed for prop “xxx”. Expected Boolean, got String.
Unknown custom element: - did you register the component correctly?
Unexpected token: operator xxxxx
跨域問題怎么破!比如No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Component template shold contain exactly one root element.If you are useing v-if on multiple elements , xxxxx
寫在最后

前言

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

安裝超時(install timeout)

在我們拿到新項目npm install下載依賴的時候，經(jīng)常會報的一個錯誤，方案有這么些:

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’ - 找不到某些依賴或者模塊

這種情況一般報錯信息可以看到是哪個包拋出的信息.，一般卸載這個模塊,安裝重新安裝下即可.

data functions should return an object

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

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

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

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

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

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

解決方案:

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

Uncaught ReferenceError: xxx is not define；

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

npm run dev 報端口錯誤!Error: listen EADDRINUSE :::8080

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

dev: {
    env: require("./dev.env"),
    port: 8080, //  這里這里,若是這個端口已經(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

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

單組件中里面的 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)入的時候忽略的拓展名范圍
    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

大佬,這個一看就是語法錯誤啊，基本都是符號問題，一般報錯會給出哪一行或者哪個組件。

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

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

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

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

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

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

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