Vue開發時常見的錯誤有哪些

今天小編給大家分享一下Vue開發時常見的錯誤有哪些的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

安裝超時(install timeout)

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

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

data functions should return an object

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

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

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

給組件內的原生控件添加事件,不生效了

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

我在函數內用了this.xxx=,為什么拋出Cannot set property ‘xxx’ of undefined;

這又是this的套路了，this是和當前運行的上下文綁定的；

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

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

解決方案:

暫存法: 函數內先緩存 this , let that = this;(let是 es6, es5用 var)
箭頭函數: 會強行關聯當前運行區域為 this 的上下文;

Uncaught ReferenceError: xxx is not define；

實例內的 data 對應的變量沒有聲明，你導入模塊報這個錯誤,那一定是導出沒寫好。

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

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

dev: {
    env: require("./dev.env"),
    port: 8080, //  這里這里,若是這個端口已經給系統的其他程序占用了.改我改我!!!!!!
    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

這個問題只出現老項目升級到 vue2.5+的時候, 提示就是 scope 現在要用 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"], // 可以導入的時候忽略的拓展名范圍
    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.

這種問題一般就是組件內的 props 類型已經設置了接受的范圍類型, 而你傳遞的值卻又不是它需要的類型,寫代碼嚴謹些 OK?

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

組件沒有正確引入或者正確使用,依次確認

導入對應的組件
在 components 內聲明
在 dom 區域聲明標簽

Unexpected token: operator xxxxx

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

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

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

線下開發模式,比如你用了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 區域必須要有一個根元素,不能出現同級元素. 可以用v-if和v-else-if指令來控制其他元素達到并存的狀態。
換個直白的解釋,就是有一個唯一的父類,包裹者; 比如一個 div(父包含塊) 內部多少個同級或者嵌套都行,但是最外層元素不能出現同級元素!

以上就是“Vue開發時常見的錯誤有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。