vuejs常見報錯有哪些-Vue.js-PHP中文網

vuejs常見報錯有哪些

藏色散人

發布： 2023-01-13 00:45:45

原創

3509 人瀏覽過

vuejs常見報錯有：1、「vue不是內部或外部命令」錯誤；2、安裝bootstrap時報「Install fail! Error」錯誤；3、ESLint語法報錯；4、「es2015」錯誤；5 、使用「vue-vli4」時報錯error等等。

vuejs常見報錯有哪些

本文操作環境：Windows7系統、vue2.9.6版，DELL G3電腦。

vuejs常見報錯有哪些？

常見錯誤和vue常見錯誤總結

1、'vue' 不是內部或外部指令，也不是可運行的程式或批次檔。

需要安裝

2、安裝bootstrap的時候一直報錯：

D:\workspace\WebstormProjects\vuejslearn\duli\duli1>cnpm install bootstrap -- sav
 e --save-exact
 × Install fail! Error: [@--save-exact] resolved target D:\workspace\WebstormProj
 ects\vuejslearn\duli\duli1\--save-exact error: ENOENT: no such file or directory,
  lstat &#39;D:\workspace\WebstormProjects\vuejslearn\duli\duli1\--save-exact&#39;
 Error: [@--save-exact] resolved target D:\workspace\WebstormProjects\vuejslearn\d
 uli\duli1\--save-exact error: ENOENT: no such file or directory, lstat &#39;D:\worksp
 ace\WebstormProjects\vuejslearn\duli\duli1\--save-exact&#39;
     at module.exports (D:\soft\html\nodejs\node_modules\node_global\node_modules\
 cnpm\node_modules\npminstall\lib\download\local.js:30:11)
     at module.exports.throw (<anonymous>)
     at onRejected (D:\soft\html\nodejs\node_modules\node_global\node_modules\cnpm
 \node_modules\co\index.js:81:24)
 npminstall version: 3.22.1

登入後複製

等等，

##結果是因為--save之間多了個空格符號！正確的是--和sava緊密寫在一起

3.ESLint語法報錯，因為使用ide編輯器格式化的空格不同。不識別vue的空格語法規則。導致一直報錯

ESLint: Expected indentation of 2 spaces but found 4.(indent)

登入後複製

找了很多方法都不行，最後找的一個解決辦法是：在.eslintignore文件裡：新增一個*.vue就回取消檢查dve模式可以忽略

4.error in ./src/main.js Module build failed: Error: Couldn't find preset "es2015」報錯

<p>{<br/>  "presets": [["es2015", { "modules": false }]],<br/>  "plugins": [<br/>    [<br/>      "component",<br/>      {<br/>        "libraryName": "element-ui",<br/>        "styleLibraryName": "theme-chalk"<br/>      }<br/>    ]<br/>  ]<br/>}</p>

登入後複製

解決方法

執行下方指令：

<p>npm install --save-dev babel-preset-es2015<br/></p>

登入後複製

成功：

5.使用vue-vli4時，報錯： error: Unexpected console statement (no-console)

寫專案過程中用ESLint遵守程式碼規範很有必要，但是對於一些規範也很是無語，例如：'Unexpected console statement (no-console)' ，連console都不能用，這就很抓狂了。其實增加一行程式碼即可。

修改package.json中的

eslintConfig:{} 中的「rules」:{}，

增加一行程式碼: "no-console":"off"

範例：

"no-console":"off"

參考文章：https://www.jianshu.com /p/4f2a6ca1f562

6.報錯：ESLint: Elements in iteration expect to have 'v-bind:key' directives.(vue/require-v-for-key)

#原因是eslint偵測出現bug

解決方法有兩種

1. v-for 後面加上:key='item'

<p><label>性别：<br/>                    <select v-if="editing" v-model="gender"><br/>                        <option v-for="gender in genders" :key="gender">{{gender}}</option><br/>                    </select><br/>                    <span v-if="!editing">{{gender}}</span><br/>                </label></p>

登入後複製

2. 在build處關閉eslint偵測

...(config.dev.useEslint ? [createLintingRule()] : []) ,