1癞松、RangeError: Maximum call stack size exceeded
一般vue-router報錯說明是路由配置出問題了，或者跳轉(zhuǎn)調(diào)用路由的時候出現(xiàn)死循環(huán)入蛆，RangeError: Maximum call stack size exceeded是死循環(huán)出現(xiàn)的語句响蓉，這種情況先檢查組件中是否有重名調(diào)用，如果有應重新考慮組件命名哨毁。

2枫甲、Computed property "XXX" was assigned to but it has no setter
造成這種問題的根源在于XXX屬性在vue表單中，使用v-model進行雙向綁定且需要在computed中進行計算更新時扼褪，需要保證XXX屬性具有setter方法才能計算想幻。
下面以我的store作為示例：

• 方案1（vue官方推薦）

// store.js
const app = {
  state: {
      praiseCheckStatus: false,
  },
  mutations: {
      SETPRAISECHECKSTATUS(state, data) {
          state.praiseCheckStatus = data;
      },
  },
  actions: {
      setPraiseCheckStatus({commit}, data) {
          commit('SETPRAISECHECKSTATUS', data);
      },
  },
};

export default app;

computed: {
  praiseCheckStatus: {
      get () {
          return this.$store.state.app.praiseCheckStatus;
      },
      set (newValue) {
          this.$store.dispatch('setPraiseCheckStatus', newValue);
      }
  }
}

• 方案2

// store.js
const app = {
    state: {
        praiseCheckStatus: { checked: false },
    },
    mutations: {
        SETPRAISECHECKSTATUS(state, data) {
            state.praiseCheckStatus.checked = data;
        },
    },
    actions: {
        setPraiseCheckStatus({commit}, data) {
            commit('SETPRAISECHECKSTATUS', data);
        },
    },
};

export default app;

computed: {
    ...mapState({
        praiseChecked: state => state.app.praiseCheckStatus
    })
},
methods: {
    praiseCheckboxChange(e) {
        this.$store.dispatch('setPraiseCheckStatus', e.target.checked);
    },
}

這樣需要在表單中v-model="praiseChecked.cheked"即可，其實是利用Object對象自帶get话浇、set方法脏毯，所以沒有直接對計算屬性進行計算，而是對該計算屬性對象的某個屬性值進行賦值幔崖。

還有另外的錯誤情況食店，比如：

computed: {
    ...mapState({
        list: state => state.app.list
    }),
},
methods: {
    delete() {
        ....... // 執(zhí)行過程
        this.$store.dispatch('setPostCommentList', this.list);
    }
}

由于computed計算結(jié)果屬性會映射到當前vue組件的data數(shù)據(jù)源中，所以我們可以直接this.list來使用這個計算后的屬性岖瑰，但上面這種情況是我們把this.list處理改變了this.list原有數(shù)據(jù)后直接塞回store中的行為會報這個錯誤叛买，因為vuex的stroe中的數(shù)據(jù)是只讀的，想要改變store中的數(shù)據(jù)需要通過dispatch或commit來觸發(fā)改變蹋订，所以不能在組件中直接操作store中的數(shù)據(jù)并重新dispatch或commit率挣，需要用一個新的數(shù)據(jù)副本來進行dispatch或commit

• 解決方案:

methods: {
    delete() {
        ....... // 執(zhí)行過程
        // 執(zhí)行刪除偽代碼，這里的刪除依然不能改變this.list的原有數(shù)據(jù)結(jié)構(gòu)
        // newList是一個全新的數(shù)組
        const newList = this.list.delete(); 
        this.$store.dispatch('setPostCommentList', newList);
    }
}

3露戒、[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "XXX"
造成這個問題的原因是vue中不允許直接操作通過props傳過來的數(shù)據(jù)椒功。
解決辦法很簡單，在data中創(chuàng)建一個副本YYY變量智什，初始值為props屬性XXX的值动漾，同時在組件內(nèi)所有需要調(diào)用props的地方調(diào)用這個data對象YYY，副本變量發(fā)生變化后荠锭，通過this.$emit()方法告訴父組件XXX需要發(fā)生變化旱眯，父組件中將數(shù)據(jù)處理后再通過props重新傳遞給子組件。

4、Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
原因：webpack打包路徑配置的不對删豺，修改即可