0

我正在使用 @vue/cli 5.0.0-beta.3、vue 3.2.8 和 element-plus 1.1.0-beta.8。

为了减小构建包的大小，我尝试在index.html文件中使用 import 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文件排除元素加：

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 的新手，我不知道为什么会发生这种情况以及如何配置它。

4

2 回答 2

1

如果您检查 CDN 链接，则除了 element-plus 之外的所有部门都从dist文件夹加载。这些是库的编译版本。

Element-plus 使用 link https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/lib/index.js。如果你打开文件，你会看到类似的东西require——这显然不是浏览器的文件。它需要由Webpack 1st 处理...

当前的文档建议从cdn.jsdelivr.net/npm/element-plus使用 jsDelivr 时加载，但由于lib某些奇怪的原因，即使他们在package.json中为 jsDelivr 设置了默认文件，该 URL 也会作为文件加载为"dist/index.full.js"

所以现在不要使用短路径，而是使用这个链接：https://cdn.jsdelivr.net/npm/element-plus@1.1.0-beta.8/dist/index.full.js

于 2021-09-03T05:57:16.360 回答
0

ReferenceError: exports is not defined在脚手架“vuejs-admin-dashboard-template”之后，我在生产模式下收到此错误（ ）。

禁用此设置vite.config.js为我解决了它。

build: {
    commonjsOptions: {
      transformMixedEsModules: false,
    }
  }
于 2022-03-02T12:53:50.377 回答