持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第11天，点击查看活动详情

前言

最近在公司开发新的项目，然后在项目中遇到一些问题，今天通过这篇文章总结下，方便后续方便查阅。

问题

vue-cli5使用的webpack5兼容问题多

之前项目的vue-cli的版本是4.5.0的，然后看到vue-cli的最新版本是5.0.4。所以我就想把vue-cli升级到最新版本。

升级后运行直接报错。

错误日志：

webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto") }'
- install 'crypto'

上面提示的就是 vue-cli5用的就是webpack5，webpack5做了升级，不再自动引入node的核心模块polyfill，比如crypto,stream等。

需要我们手动引入。

我们可以在vue.config.js中的configureWebpack字段，配置fallback。

configureWebpack: {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto")
    }
  }
}

解决了这个问题，之后又出现一些依赖找不到的问题，或者语法不支持的问题。

所以别在旧项目轻易升级vue-cli5，可以在新项目上使用vue-cli5。

vue-cli的版本和sass-loader版本冲突

上面讲到我升级了vue-cli为vue-cli5，它配套的sass-loader是12版本的。因为我升级了vuecli5，但是项目本身和webpack5不是很兼容，所以后面我回退了vue-cli版本，为4.5.x。

但是我的sass-loader没有回退版本，导致我运行项目时报了错。

sass-loader:

Syntax Error: TypeError: this.getOptions is not a function

后面查找资料发现

sass-loader从11版本开始，最低版本只支持weback5了。如果你用的其它版本的webpack可能就报错了。

因为我回退了vue-cli版本，导致webpack不是5了。

所以需要把sass-loader降级为10版本或者8版本。

    "sass": "^1.32.11",
    "sass-loader": "^10.1.1"

这样就没有报错了。