Delete `,` 怎么解決

最近又來(lái)了一個(gè)急項(xiàng)目，之前的項(xiàng)目基礎(chǔ)上改版，開(kāi)始用的是webStrome，最近半年換了vsCode，導(dǎo)致老項(xiàng)目在Vscode下報(bào)這個(gè)錯(cuò)，由于項(xiàng)目已經(jīng)很龐大，編譯+提示要費(fèi)時(shí)近10秒，百度了一下eslint，發(fā)現(xiàn)解決不了這個(gè)問(wèn)題，項(xiàng)目實(shí)在是太趕，這個(gè)就先放著。

使用formate document的時(shí)候會(huì)默認(rèn)帶上逗號(hào)，執(zhí)行yarn lint --fix會(huì)刪除逗號(hào)，我的習(xí)慣是寫(xiě)一段代碼后會(huì)格式化一下，這樣編譯就很慢了，提交文件前又要lint后提交很麻煩，按照官方的說(shuō)明是沒(méi)有設(shè)置prettier導(dǎo)致體驗(yàn)不一致，

解決辦法

是在項(xiàng)目根目錄下面添加一個(gè).prettierrc文件，內(nèi)容如下（內(nèi)容可以為空對(duì)象）

{
  "semi": true, //結(jié)尾加分號(hào) 老項(xiàng)目默認(rèn)配置
  "singleQuote": false //雙引號(hào) 老項(xiàng)目默認(rèn)配置
}

vue常見(jiàn)錯(cuò)誤解決

在做vue項(xiàng)目的時(shí)候遇到了幾個(gè)報(bào)錯(cuò)，這幾個(gè)報(bào)錯(cuò)在vue項(xiàng)目還算常見(jiàn)，因此記錄下來(lái)解決方法。

Error in render: “TypeError: Cannot read property ‘list’ of undefined”

報(bào)錯(cuò)： 渲染錯(cuò)誤：“未定義的Type Error：無(wú)法讀取屬性”列表

原因： 沒(méi)給list定義，也就是說(shuō)在temple中用到list了，但是在data中沒(méi)定義這個(gè)字段，如果已經(jīng)定義了但是還是報(bào)錯(cuò)，請(qǐng)檢查下自己是否拼錯(cuò)了單詞，因?yàn)槲揖褪沁@么蠢了= =

解決：

data () {
  return {
    list: []
  }
},

[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

報(bào)錯(cuò)： message沒(méi)定義

原因： 跟上面的一樣，message在data那里沒(méi)有定義，定義一個(gè)初始值就好

解決：

data() {
 return {
     message: ''
  }
},

Module build failed: Error: No parser and no file path given, couldn’t infer a parser.

報(bào)錯(cuò)： 沒(méi)有語(yǔ)法分析器和文件路徑，無(wú)法推斷解析器

原因： 依賴包出現(xiàn)問(wèn)題，prettier 一個(gè)vue-cli的依賴，把一個(gè)feature 的移除當(dāng)作次版本發(fā)布

解決： npm install --save-dev prettier@1.12.0（刪除 node_modules下_prettier@1.13.0@prettier文件夾）

routes forEach is not a function

原因： forEach routes沒(méi)有發(fā)現(xiàn)里面有值

解決：

1.查看import {routes} from './routes’這個(gè)路徑是否正確

2.routes是一個(gè)數(shù)組，檢查routes是否是一個(gè)數(shù)組

3.是否已經(jīng)new了一個(gè)router，又再次new一遍?

// main.js
// 路由配置
const RouterConfig = {
  // 使用HTML5的History模式
  mode: 'history',
  routes: Routers
}
// new VueRouter
const router = new VueRouter(RouterConfig)


// router.js
// 在router中又再次new一遍，重復(fù)了?。。。?
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

改為：
// router.js
const routers = [
  {
    path: '/home',
    meta: {
      title: '主頁(yè)'
    },
    component: (resolve) => require(['../page/home.vue'], resolve)
]
export default routers

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

原因： 被引用的組件頁(yè)面沒(méi)有進(jìn)行export，導(dǎo)致尋找不到瀏覽器console報(bào)錯(cuò)，但是編譯的時(shí)候沒(méi)有語(yǔ)法問(wèn)題不報(bào)錯(cuò)

解決：

export { default as AppMain } from './AppMain'

TypeError: Cannot read property ‘vue’ of undefined

報(bào)錯(cuò)信息：ERROR in ./src/login.vue Module build failed (from ./node_modules/_vue-loader@13.7.3@vue-loader/index.js): TypeError: Cannot read property ‘vue’ of undefined at Object.module.exports (F:\VistualStudioCode\threess\node_modules_vue-loader@13.7.3@vue-loader\lib\load er.js:61:18) @ ./src/main.js 7:13-35 @ multi ./node_modules/_webpack-dev-server@3.1.10@webpack-dev-server/client?http://localhost:3000 (webpack)/h ot/dev-server.js ./src/main.js

原因： vue-loader這個(gè)插件被破壞了

解決：

// 重新安裝依賴
npm install vue-loader@latest --save-dev

route內(nèi)的query參數(shù)沒(méi)有實(shí)時(shí)監(jiān)聽(tīng)，放在data中

報(bào)錯(cuò)信息： 導(dǎo)致query參數(shù)改變之后，頁(yè)面并沒(méi)有發(fā)生變化

解決：

  watch: {
    $route: {
      handler (newVal, oldVal) {
        this.isBindInfo = newVal.query.isBindInfo
        this.isRealName = newVal.query.isRealName
        this.sessionId = newVal.query.sessionId
        this.showNo = newVal.query.showNo
        // 判斷newVal有沒(méi)有值監(jiān)聽(tīng)路由變化
      },
      deep: true,
    },

  },

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論