我想制作一個適用于 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, one rrorCaptured, 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)
有人有解決方案或方法嗎？
uj5u.com熱心網友回復：
正如錯誤所說，“vue”包中沒有“默認”匯出。那是因為 Vue 3 中的全域 Vue API 初始化已經從：
import Vue from 'vue'
到
import { createApp } from 'vue'
const app = createApp({})
換句話說，全域 API 不是默認由 'vue' 包匯出的，而是由 'createApp' 函式創建的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/438567.html
上一篇：VueV-Model改變多個物件