Vue 3 包更新错误答案

【问题标题】：Vue 3 Package Update ErrorsVue 3 包更新错误
【发布时间】：2021-10-18 02:22:58
【问题描述】：

Vue 3 应用程序损坏/不会在包更新后编译。更新前零错误。

我收到以下节点控制台错误。

错误

"export 'createElementBlock' (imported as '_createElementBlock') was not found in 'vue'
"export 'createElementVNode' (imported as '_createElementVNode') was not found in 'vue'
"export 'normalizeClass' (imported as '_normalizeClass') was not found in 'vue'

更多信息...

:class 抛出 normalizeClass 错误。

浏览器错误

Uncaught TypeError: Object(...) is not a function
    at eval (App.vue?3dfd:2)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/App.vue?vue&type=template&id=7ba5bd90 (app.js:1091)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (App.vue?2083:1)
    at Module../src/App.vue?vue&type=template&id=7ba5bd90 (app.js:1310)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (App.vue?eabf:1)
    at Module../src/App.vue (app.js:1274)

package.json

  "dependencies": {
    "@stripe/stripe-js": "^1.17.0",
    "core-js": "^3.16.1",
    "date-fns": "^2.23.0",
    "firebase": "^8.9.1",
    "register-service-worker": "^1.7.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-pwa": "~4.5.13",
    "@vue/cli-plugin-router": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "~4.5.13",
    "@vue/compiler-sfc": "^3.2.2",
    "sass": "^1.37.5",
    "sass-loader": "^10",
    "typescript": "~4.3.5"
  }

近期升级

@vue/cli-plugin-babel               ~4.5.0  →  ~4.5.13
@vue/cli-plugin-pwa                 ~4.5.0  →  ~4.5.13
@vue/cli-plugin-router              ~4.5.0  →  ~4.5.13
@vue/cli-plugin-typescript          ~4.5.0  →  ~4.5.13
@vue/cli-plugin-vuex                ~4.5.0  →  ~4.5.13
@vue/cli-service                    ~4.5.0  →  ~4.5.13
@vue/compiler-sfc                   ^3.0.0  →   ^3.2.2
sass                               ^1.26.5  →  ^1.37.5
sass-loader                         ^8.0.2  →  ^10.2.0
typescript                          ~4.1.5  →   ~4.3.5
@stripe/stripe-js                  ^1.16.0  →  ^1.17.0
core-js                             ^3.6.5  →  ^3.16.1
firebase                            ^8.6.7  →   ^8.9.1
register-service-worker             ^1.7.1  →   ^1.7.2

【问题讨论】：

标签： vue.js webpack vuejs3

【解决方案1】：

我通过以下方式解决了我的问题：

rm -rf node_modules/
rm package-lock.json
npm cache verify
npm i && npm up

如果使用 sass，通过 package.json 锁定版本。

"sass-loader": "^10".

【讨论】：

【解决方案2】：

我刚刚找到了解决方案，我继续更新我的 vue 3.0.0 到 3.2.0。警告现在不显示了。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【解决方案3】：

昨天，我帮朋友解决了这个问题。她和你遇到的完全一样。解决方案：

删除 node_modules/
删除 package-lock.json 文件
修改package.json中的依赖：“@vue/compiler-sfc”：“3.0.4”
重新安装：npm install

这个问题是由“@vue/compiler-sfc”包的错误版本引起的。具体原因我没看。我目前使用的是 3.0.4 版本，后续版本会导致构建错误。所以版本被锁定在 package.json 中。

更新：

我为我对@vue/compiler-sfc 的质疑感到羞耻。事实上，我相信这次我发现了问题。应该是朋友用的一个项目，应用了webpack的DLL技术，但是因为包版本没有锁定，所以node_modules包更新后DLL文件没有更新，导致包索引指向不正确。可能还有其他因素。总之，这个人技术太弱了。

关于 dll 配置。在包没有变化的情况下，我们在打包的时候不需要重新打包那些依赖如vue、vue-router等。

这次的情况是：

compiler-sfc为3.1.x版本时，dll_v1文件已生成一次，
一次性添加包，将 compiler-sfc 更新到 3.2.x
yarn build时，webpack根据dll_v1打包源码，失败。

恰好是朋友的同事太精明了。估计是从别处的仓库里抄过来改的，所以不知道什么是dll？因此，不会生成新的 dll_v2。

解决方案：生成一个新的 dll 文件并直接构建它。

【讨论】：