Vue 编译器无法解析“vue”

Posted

技术标签:

【中文标题】Vue 编译器无法解析“vue”【英文标题】:Vue compiler can't resolve 'vue' 【发布时间】:2021-04-30 20:55:13 【问题描述】:

版本 3.0.5

复制链接 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。然后会出现这样的错误。

如果我用npm导入vue,这个问题就解决了。

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

我想用vue和cdn一起使用,如何解决?

【问题讨论】:

【参考方案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”的主要内容,如果未能解决你的问题,请参考以下文章

vuejs:vue-cli webpack模板无法解析sass导入

[Vue 警告]:无法解析组件

vue-router:无法解析异步组件渲染

未找到模块:错误:无法解析 | Vue路由器

找不到模块:错误:无法解析“vue”

Vue3/Inertia 无法解析组件