利用CDN的Vue ElementUI Webpack外部
尝试使用Vue和ElementUI使用webpack4设置项目。我想从CDN中同时提取Vue和ElementUI，所以我有下面的webpack配置
module.exports = {
mode: "development",
entry: ["./app.js"],
externals: {
vue: "Vue",
"element-ui": "ElementUI"
},
module: {
rules: [
{
test: /.vue$/,
use: "vue-loader"
},
{
test: /.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /.ttf$|.woff$/,
use: [{ loader: "url-loader", options: { limit: 10000 } }]
}
]
}
};我的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div v-cloak id="root">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.runtime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.3.4/index.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>我的app.js有根Vue实例
import Vue from "vue";
import ElementUI from "element-ui";
import Counter from "./Counter.vue";
Vue.use(ElementUI);
var app = new Vue({
el: "#root",
render: h => h(Counter)
});计数器组件在下面
<script>
export default {
data() {
return {
counter: 0
};
},
methods: {
incement() {
this.counter++;
}
}
};
</script>
<template>
<div>
<p><span>Count: </span>{{counter}}</p>
<el-button @click="incement">Incement</el-button>
</div>
</template>当我在浏览器中打开应用程序时，我会出现以下错误
external_" ElementUI ":1未定义的ReferenceError: ElementUI在webpack生成的js文件module.exports =ElementUI中没有定义；
这里面有我遗漏的东西吗？Vue外部工作没有任何问题，只有元素UI有问题。
回答 1
Stack Overflow用户
发布于 2018-10-22 14:59:04
您的webpack配置"element-ui": "ElementUI"告诉webpack“element”可以作为全局变量ElementUI使用。
Webpack创建了代码片段module.exports = ElementUI;，这样每当您导入(或需要w/e)“element”时，它都会返回这个全局变量。
现在看来，ElementUI似乎不存在于全局范围内，因此出现了ReferenceError。
脚本.元素-ui/2.3.4/index.js添加了一个全局变量Element，因此尝试用"element-ui": "Element"更改webpack配置
https://stackoverflow.com/questions/49820973
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号