用webpack (@vue/cli@next)搭建时，如何排除element-plus套餐(替换为import CDN)？
我使用@ vue /cli 5.0.0-beta.3，vue 3.2.8和element-plus 1.1.0-beta.8。
为了减小构建包的大小，在index.html文件中导入CDN构建包时，尽量排除所有第三方依赖(vue、vue-router、vuex、element-plus等)：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- cdn import -->
<!-- vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.8/dist/vue.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.11/dist/vue-router.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@4.0.2/dist/vuex.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-class-component@8.0.0-rc.1/dist/vue-class-component.global.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js"></script>
<!-- cdn import -->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>Financial Tools</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>虽然我无法用vue.config.js文件排除element-plus：
module.exports = {
config.externals = {
vue: "Vue",
"vue-router": "VueRouter",
vuex: "Vuex",
"element-plus": "ElementPlus",
}
}vue/cli服务启动，页面控制台报告错误：
Uncaught ReferenceError: ElementPlus is not defined下面是一个重现此问题的示例项目：https://github.com/linrongbin16/financial_tools_app3
还有另一个错误：
Uncaught ReferenceError: exports is not defined同样来自element-plus CDN：
"use strict";Object.defineProperty(exports,"__esModule" ...再想一想，也许我的tsconfig.json文件有问题：
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"useDefineForClassFields": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}但由于我对vue3+typescript+element-plus还不熟悉，我不知道为什么会发生这种情况，也不知道如何配置它。
回答 1
Stack Overflow用户
发布于 2021-09-03 05:57:16
如果您检查CDN链接，则除了元素加从dist文件夹加载以外的所有dep。这些都是库的编译版本。
Element-plus使用链接https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js。如果你打开这个文件，你可以看到像require这样的东西--这显然不是一个浏览器文件。需要由Webpack先来处理。
current docs建议在使用jsDelivr时从cdn.jsdelivr.net/npm/element-plus加载，但由于某种奇怪原因，他们将URL加载为lib文件，即使他们在package.json中将jsDelivr的默认文件设置为"dist/index.full.js"
因此，现在不要使用短路径，而应使用以下链接：https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.js
https://stackoverflow.com/questions/69039414
复制相似问题
腾讯云开发者
