Vue3与unpkg合作，但不与npm + webpack合作。
Vue3与unpkg合作，但不与npm + webpack合作。
提问于 2021-08-07 18:59:39
我正在尝试建立Vue3，这样我可以通过npm + webpack来使用它。由于某些原因，组件没有被挂载，也没有显示错误。如果我使用unpkg，它就能工作。我怎样才能让国家预防机制+ webpack选项发挥作用？
我的"vue": "^3.1.5"在我的package.json和下面的webpack配置：
module.exports = {
mode: 'production',
entry: {
provider: './src/components/provider.js',
requester: './src/components/requester.js',
},
optimization: {
minimize: false
},
output: {
path: `${__dirname}/../public`,
filename: '[name].js',
}
}requester.js：
import { createApp } from 'vue'
createApp({
template: `
<div>
<div>
<h2>Números recibidos</h2>
{{ receivedNumbers }}
<ul>
<li v-for="n in receivedNumbers">{{ n }}</li>
</ul>
</div>
</div>
`,
data() {
return {
receivedNumbers: [1,2,3],
numberRequestIsOpen: false,
}
},
}).mount('#requester-component');requester.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>requester</h1>
<div id="requester-component"></div>
<script src="requester.js"></script>
</body>
</html>结果html
<h1>requester</h1>
<div id="requester-component" data-v-app=""><!----></div>
<script src="requester.js"></script>另一方面，如果我将<script src="https://unpkg.com/vue@next"></script>添加到html的head标记中，并将js更改为：
Vue.createApp({
//
}).mount('#requester-component');则生成的html是
<h1>requester</h1>
<div id="requester-component" data-v-app=""><div><div><h2>Números recibidos</h2> [
1,
2,
3
] <ul><li>1</li><li>2</li><li>3</li></ul></div></div></div>
<script src="requester.js"></script>这是预期的输出。
链接到存储库，以防它在附近玩。最后一次提交添加unpkg有，而上一次提交有npm版本。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-09 13:36:22
https://github.com/vuejs/vue-next/issues/4275
为了使用vue.js模板的功能，需要使用编译器和运行时加载已完成的包，但vue.js默认只加载运行时版本，因此需要显式指定版本(vue.esm-bundler.js)。
添加
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm-bundler.js'
}
}解决了这个问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68695349
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号