当变量明确定义时，错误说变量未定义

Question

我收到一条错误消息，说我的变量在错误上方几行定义时未定义。

我真的不明白为什么我会收到这个错误，我也不知道是什么导致了这个错误。

错误仅显示在浏览器中。运行我的应用程序的终端没有错误。

main.ts的内容

import { createApp } from 'vue'
import { History, IHistory } from '@/modules/history/History'
import App from './App.vue'
import ElementPlus  from 'element-plus'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hist: IHistory;
  }
}

const app = createApp(App)
app.use(ElementPlus, { size: 'small' })
app.config.globalProperties.$ELEMENT = { size: 'small' }
app.config.globalProperties.$hist = History.instance()
app.mount('#app')

导出的控制台日志

log.js?1afd:24 [HMR] Waiting for update signal from WDS...
main.ts?cd49:13 Uncaught ReferenceError: ElementPlus is not defined
    at eval (main.ts?cd49:13)
    at Module../src/main.ts (app.js:1798)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at Object.1 (app.js:2027)
    at __webpack_require__ (app.js:849)
    at checkDeferredModules (app.js:46)
    at app.js:925
    at app.js:928
eval @ main.ts?cd49:13
./src/main.ts @ app.js:1798
__webpack_require__ @ app.js:849
fn @ app.js:151
1 @ app.js:2027
__webpack_require__ @ app.js:849
checkDeferredModules @ app.js:46
(anonymous) @ app.js:925
(anonymous) @ app.js:928

Answer 1

我找到了问题的根源，我认为这不是真正的问题，因为我相信这是预期的行为。

此行为是由 babel 插件 (babel-plugin-import) 引起的。

要解决我的问题，我所要做的就是导入 Element⁺ 组件而不是 ElementPlus 本身。

固定main.ts

import { createApp } from 'vue'
import { History, IHistory } from '@/modules/history/History'
import App from './App.vue'
import { ElRow, ElCol } from 'element-plus'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hist: IHistory;
  }
}

const app = createApp(App)
app.use(ElRow)
   .use(ElCol)

app.config.globalProperties.$ELEMENT = { size: 'small' }
app.config.globalProperties.$hist = History.instance()
app.mount('#app')

Babel 配置（babel.config.js）

module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
   ],
  ],
};