使用 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 了？？？