问题描述
版本 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,怎么解决?
解决方法
为了使用来自 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>