跳到主要内容

3 篇博文 含有标签「debug」

查看所有标签

Vue踩坑汇总

· 阅读需 2 分钟
Yana Ching
Yana Ching
Front End Engineer

Trailing spaces not allowed​

删除多余空行即可

Newline required at end of file but not found​

文件末尾需要换行符，但找不到

解决：=> 在 js css等后面再加一行(空行)

error Extra semicolon semi​

不使用分号

多次引入 element-ui​

2:24  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
3:32  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
4:23  error  'E:\Develop\Apache\htdocs\econ.com\node_modules\element-ui\lib\element-ui.common.js' imported multiple times  import/no-duplicates
6:1   error  More than 1 blank line not allowed                                                                            no-multiple-empty-lines

解决方法：

使用一次 import 即可

// ========== before ===========
import { Button } from 'element-ui'
import { Form, FormItem } from 'element-ui'
import { Input } from 'element-ui'
// ========== before ===========
import { Button, Form, FormItem, Input } from 'element-ui'

tab四字节导致的错误​

31:1 error Expected indentation of 4 spaces but found 0 indent 33:1 error Expected indentation of 6 spaces but found 4 indent 34:1 error Expected indentation of 8 spaces but found 4 indent 35:1 error Expected indentation of 8 spaces but found 4 indent 36:1 error Expected indentation of 6 spaces but found 4 indent 37:1 error Expected indentation of 4 spaces but found 0 indent 38:1 error Expected indentation of 2 spaces but found 0 indent

修改编辑器tab 键字节数，修改设置settings.json：

"editor.tabSize": 4：指定一个tab等于多少个空格，例如此处指定4就像等于4个空格，2就等于两个空格
"editor.detectIndentation":false ：必须指定！！否则指定的tab大小将不起效果

没必要的返回语句​

Unnecessary return statement no-useless-return

login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return
  })
}
// ========= 修改 ============
login() {
  // console.log(this)登陆时候的预校验。
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) return false 
  })
}

vue ui 启动可视化面板一片空白​

删除 C:\Users\Administrator 下的 '.vue-cli-ui' 文件即可

Webpack Error Debug

· 阅读需 2 分钟
Yana Ching
Yana Ching
Front End Engineer

Module not found: Error: Can't resolve ' XX ' in ' XXXX '​

::: tip 重新安装项目依赖 :::

npm i XX

[Vue warn]: Cannot find element: #app​

打包好的 js（webpack中的 bundle.js） 文件要最后引入，因为要先有 #app 挂载的 div 元素，Vue 才能获取相应的元素
原来的 JS 文件位置：<head><script src="/bundle.js"></script></head>
// ================== 修正后位置 =================
<body>
    <div id="app"></div>
    <!-- ...  -->
    <script src="/bundle.js"></script>
</body>

webpack -p 打包报错​

危险

npm ERR! file D:\Z-work space\DOC\reading_IT\webpack-study\package.json npm ERR! code EJSONPARSE npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected token / in JSON at position 223 while parsing near '...entBase src --hot", // 调试开发命令 npm ERR! JSON.parse "dev1"...' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

package.json 文件中不能添加 注释 ' // '
JSON 文件中不能添加注释 
// 很多人利用注释来制定解析规则，这破坏了互操作性（Interoperability）,因此将其剔除