Delete `,` 怎么解決

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

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

解決辦法

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

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

vue常見錯誤解決

在做vue項目的時候遇到了幾個報錯，這幾個報錯在vue項目還算常見，因此記錄下來解決方法。

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

報錯： 渲染錯誤：“未定義的Type Error：無法讀取屬性”列表

原因： 沒給list定義，也就是說在temple中用到list了，但是在data中沒定義這個字段，如果已經(jīng)定義了但是還是報錯，請檢查下自己是否拼錯了單詞，因?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

報錯： message沒定義

原因： 跟上面的一樣，message在data那里沒有定義，定義一個初始值就好

解決：

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

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

報錯： 沒有語法分析器和文件路徑，無法推斷解析器

原因： 依賴包出現(xiàn)問題，prettier 一個vue-cli的依賴，把一個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沒有發(fā)現(xiàn)里面有值

解決：

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

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

3.是否已經(jīng)new了一個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: '主頁'
    },
    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.

原因： 被引用的組件頁面沒有進(jìn)行export，導(dǎo)致尋找不到瀏覽器console報錯，但是編譯的時候沒有語法問題不報錯

解決：

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

TypeError: Cannot read property ‘vue’ of undefined

報錯信息：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這個插件被破壞了

解決：

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

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

報錯信息： 導(dǎo)致query參數(shù)改變之后，頁面并沒有發(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有沒有值監(jiān)聽路由變化
      },
      deep: true,
    },

  },

總結(jié)

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

最新評論