使用 Vue 及 Vue CLI3 時遇到的問題記錄

Vue & Vue CLI3 爬坑指南，使用 elementUI 在 IE 下的兼容性問題，重復聲明 h 問題，ES5 commonjs 模塊問題等。持續更新中。

Troubleshooting

exports is not defined

Uncaught ReferenceError: exports is not defined

14.0+ no longer supports module.exports. Use export default instead.

PS： 如果該依賴非要使用交付 ES5 代碼，但使用了 ES6+ 特性且沒有顯式地列出需要的 polyfill (例如 Vuetify)，請使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。
這會根據 browserslist 目標導入所有 polyfill，這樣你就不用再擔心依賴的 polyfill 問題了，但是因為包含了一些沒有用到的 polyfill 所以最終的包大小可能會增加。more info

References:

• @see vue-loader issuecomment-402487724

Duplicate declaration "h" (This is an error on an internal node. Probably an internal error.)

@vue/cli V3，不用配置可以直接用，否則配置后會報重復聲明錯誤
但是 @vue/cli V2+，需要在 babel.config.js 顯式配置：

module.exports = {
  plugins: ["transform-vue-jsx"]
}

References:

• @see babel-plugin-transform-vue-jsx

element-ui 造成的 IE Compatability

如果 element-ui 版本是 2.4.9 可以直接使用。
2.4.9 未知。
如果 element-ui 版本是 2.4.11 在 IE瀏覽器中報錯，需要在 vue.config.js 中加入，感覺原因是因為 eleFE 沒有測試過 IE11 就發版了，這個問題找了我幾個小時。解決辦法是:

module.exports = {
  transpileDependencies: ['element-ui']
}

REFERENCES:

• @see why need this
• @see transpileDependencies

后續遇到新問題，會繼續補充，希望對你有用，謝謝。

2019-8-12 更新

webpackChunkName.[undefined].js

FIXME: webpack magic comment webpackChunkName 的 hash 值 undefined 的問題

@maclockard issue not related to your problem, no solution, it was bug

• Browser fails to load async chunk. References file with "chunkhash" undefined.
• Split chunk fails to load with undefined hash
• WebpackDevServer API - HMR with async chunks when doing code splitting results in inconsistent chunk names (which makes GET calls to undefined.js)

VUEX

• 如果 state 是用 webpack-require-context 上下文注冊的，需要注意上下文依賴。在 state 還未被初始化的時候即 import（ES6 module 編譯時）引入的話，會拋出 undefined 的錯誤。解決辦法就是使用 require (CommandJS module 運行時)引入，同時需要注意 require('module').default || require('module') 來兼容 ES6 module。

• [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined" 錯誤排查后，發現是因為 vm.$store 沒有被掛載到 VueComponent 實例上？而翻看 Vuex/install 代碼 發現，其先取構造函數的 options.store 然后取 options.parent && options.parent.$store。但是在 同步的組件引入了異步的 Vuex.store & state 且被路由同步加載的話，導致了下列的 hook 不被執行且 一些組件還未聲明的問題？解決辦法就是懶加載該組件：

/**
 * Vuex init hook, injected into each instances init hooks list.
 */
function vuexInit () {
 const options = this.$options
 // store injection
 if (options.store) {
   this.$store = typeof options.store === 'function'
     ? options.store()
     : options.store
 } else if (options.parent && options.parent.$store) {
   this.$store = options.parent.$store
 }
}

2019-12-27 更新

由於我的環境中使用了 nvm, npm, yarn，而且我將 vue 用 yarn --global 安裝，或者從 yarn start 啟動項目，出現了如下問題：

Require stack:
- /Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js
- /Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/bin/vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:797:15)
    at Function.Module._load (internal/modules/cjs/loader.js:690:27)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at idToPlugin (/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:150:14)
    at /Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:189:20
    at Array.map (<anonymous>)
    at Service.resolvePlugins (/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:175:10)
    at new Service (/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js:34:25)
    at Object.<anonymous> (/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/bin/vue-cli-service.js:16:17) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/lib/Service.js',
    '/Users/givingwu/.config/yarn/global/node_modules/@vue/cli-service/bin/vue-cli-service.js'
  ]
}

從 requireStack 看，最終是從 yarn global 里啟動的。

使用 yarn install 的資源無法啟動項目，但是同事使用 npm install 的資源卻能啟動？WTF

1. 我以為是緩存問題。

yarn cache clen
yarn install
yarn start

還是不行。。。

2. 我只能切到 npm install 了嗎？

npm cache verify
npm install
npm start

npm 僅安裝了 55 個包？原諒我，一只都不怎么用 npm，不是它不好，是我不好啊。。。～～

3. 混合雙打，先干掉緩存文件

rm yarn.lock
rm package-lock.josn
npm install
yarn install

ls mode_modules/

zsh: do you wish to see all 1190 possibilities (298 lines)?

這個還算正常，再啟動一次：

npm run start

還是不行。白忙一上午后，我把同事的 node_modules 拷過來后就能 run 了。。。
WTF，要重裝系統了。