Vue 编译器无法解析 'vue'

Question

版本 3.0.5

复制link https://github.com/clark-cui/vue3-problem

重现步骤纱

npm 运行开发

期望什么？ devServer 工作成功。

到底发生了什么？找不到模块：错误：无法解析 'F:\workspace_github\vue3-problem'

中的 'vue'

我没有使用 vue-cli 或 vite 来构建这个存储库。

所以我使用 "vue-loader": "^16.1.2" 和 "@vue/compiler-sfc": "^3.0.0" 来解析'.vue'。

如果我使用 cdn 导入 vue.Then 会出现这样的错误。

如果我使用 npm 导入 vue.This 问题就解决了。

这在 vue2.I 中没有发生，我猜这是 vue-compiler 的错误。

我想用 vue 和 cdn.How 来解决这个问题？

Answer 1

为了使用来自 CDN 的 vue，您必须配置 externals 以告知 webpack 使用外部的。此外，您必须改进以下几点才能使其正常工作：

// webpack.config.js
module.exports = {
  // ...
  externals: {
     // tell `webpack` to resolve `vue` from root (window)
     vue: "Vue",
  },
  devServer: {
     // ...
     // might have to turn of this option since it throws error
     // not sure where it comes from though :(
     hot: false,
  }
}

稍微优化一下模板：


// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Move the script to here to ensure load `Vue` before your script -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0/vue.global.prod.js"></script>
  <title>Vue demo</title>
</head>

<body>
  <noscript>
    <strong>error</strong>
  </noscript>
  <div id="app"></div>
</body>

</html>

Vue 编译器无法解析 'vue'

Vue compiler can't resolve 'vue'

cdn

webpack

vue.js

vue-loader

vuejs3