Webpack/Vue vue__WEBPACK_IMPORTED_MODULE...未定义

Question

我想制作一个与 VueJS 一起工作的网络应用程序，脚本文件将与 Webpack 一起打包。

我已经用 Npm 安装了 Vue 和 Webpack。这是我的应用程序文件夹的结构：

dist
- main.js
- output.css
node_modules
- "contain the dependencies installed with NPM, including Vue"
package-lock.json
package.json
src
- app.js
- App.vue
- index.html
- input.css
tailwind.config.js
template.html
webpack.config.js

这是“package.json”文件中我的依赖项：

"devDependencies": {
    "tailwindcss": "^3.0.23",
    "webpack": "^5.69.1",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@heroicons/vue": "^1.0.5",
    "vue": "^3.2.31"
  }

这是我的“webpack.config.js”

的内容

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

这是我的“app.js”

的内容

import Vue from 'vue'

console.log(Vue); // => return "undefined"

我的问题：

Vue 没有加载，不知道为什么。

我在 main.js 建筑的日志中有以下错误：

npx webpack --config webpack.config.js --mode=development --watch
asset main.js 521 KiB [compared for emit] (name: main)
runtime modules 891 bytes 4 modules
cacheable modules 429 KiB
  modules by path ./node_modules/@vue/ 428 KiB
    ./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js 59.9 KiB [built] [code generated]
    ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 304 KiB [built] [code generated]
    ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js 40.3 KiB [built] [code generated]
    ./node_modules/@vue/shared/dist/shared.esm-bundler.js 23.5 KiB [built] [code generated]
  ./src/app.js 184 bytes [built] [code generated]
  ./node_modules/vue/dist/vue.runtime.esm-bundler.js 611 bytes [built] [code generated]

WARNING in ./src/app.js 10:12-15
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

有人有解决方案或方法吗？

Answer 1

如错误所述，'vue' 包中没有 'default' 导出。那是因为 Vue 3 中的全局 Vue API 初始化已更改为：

import Vue from 'vue'

至

import { createApp } from 'vue'
const app = createApp({})

也就是说全局的API不是'vue'包默认导出的，而是'createApp'函数创建的

Webpack/Vue vue__WEBPACK_IMPORTED_MODULE...未定义

Webpack/Vue vue__WEBPACK_IMPORTED_MODULE... is not defined

webpack

vue.js