제가 설정 잘못한걸까요?

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

Vue Router 란? : 프로젝트 적용

작성

4.3K

저는 머든지 설치를 하면 다 오류나서 구글검색해보니

--save --legacy-peer-deps 를 붙여야 되네요.

그리고 부트스탭도 선생님 알려주신대로 하면

오류나요.

오전 11:42:30 [vite] Internal server error: Failed to resolve import "./bootstrap/dist/js/bootstrap.js" from "src\main.js". Does the file exist?

Plugin: vite:import-analysis

File: D:/web/withvue/src/main.js:14:22

12 | createApp(App).use(router).use(vuetify).mount('#app');

13 |

14 | import './bootstrap/dist/js/bootstrap.js';

| ^

15 |

16 |

at formatError (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39975:46)

at TransformContext.error (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39971:19)

at normalizeUrl (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36839:33)

at async TransformContext.transform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36972:47)

at async Object.transform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30)

at async loadAndTransform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29)

이유가 무었을가요>?

vuejs

답변 2

홍성호

질문자

빛의 속도로 달린 댓글에 감사 드립니다.

main.js공유합니다.

오류문구도 첨부할게요.

추가로 제거해도

import vuetify from './plugins/vuetify'

http://127.0.0.1:5173/node_modules/.vite/deps/bootstrap_dist_js_bootstrap__js.js?v=9d3d97fb net::ERR_ABORTED 504 (Gateway Timeout)

이런 오류가 있네요.

오후 12:59:53 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/bootstrap/dist/js/bootstrap.js:7:98: ERROR: Could not resolve "@popperjs/core"
    at failureErrorWithLog (D:\web\withvue\node_modules\esbuild\lib\main.js:1575:15)
    at D:\web\withvue\node_modules\esbuild\lib\main.js:1033:28
    at runOnEndCallbacks (D:\web\withvue\node_modules\esbuild\lib\main.js:1447:61)
    at buildResponseToResult (D:\web\withvue\node_modules\esbuild\lib\main.js:1031:7)
    at D:\web\withvue\node_modules\esbuild\lib\main.js:1143:14
    at responseCallbacks.<computed> (D:\web\withvue\node_modules\esbuild\lib\main.js:680:9)
    at handleIncomingPacket (D:\web\withvue\node_modules\esbuild\lib\main.js:735:9)
    at Socket.readFromStdout (D:\web\withvue\node_modules\esbuild\lib\main.js:656:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12)

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import 'bootstrap/dist/css/bootstrap.min.css';

//import axios from "axios";
import router from '@/router';

loadFonts()

createApp(App).use(router).use(vuetify).mount('#app');
//.use(BootstrapVue)  
  
  //Vue.prototype.$axios = axios;  
  //app.config.globalProperties.$axios = axios;
  import 'bootstrap/dist/js/bootstrap.js';

짐코딩

지식공유자

안녕하세요.

제가 다시 한 번 프로젝트 설정을 해봤을때 문제발생이 안돼서요 🥲

설정하신걸 보니 강의 내용과 상이한 부분이 있는데요. 해당 오류만 보고 어떤 문제인지 파악하는데 한계가 있어서요.

우선 해당 강의가 Vue3 학습에 집중한 강의인 만큼 강의와 똑같이 프로젝트 설정을 진행해 보시는 것은 어떨까요? 😯

홍성호

질문자

감사합니다

짐코딩

지식공유자

안녕하세요.

강의내용과 똑같이 진행하신게 맞을까요?

1) 우선 bootstrap은 import 경로 확인 부탁드립니다.

import './bootstrap/dist/js/bootstrap.js'; // [X]
import 'bootstrap/dist/js/bootstrap.js'; // [O] node_modules에서 가져와야 합니다.

2) Vuetify 설치관련

에러 로그를 보니 강의에서 설치하지 않았던 라이브러리가 있어서요. 예를들어 Vuetify 설치는 Vuetify 공식문서를 읽어보시고 설치를 진행 하셔야 합니다.

감사합니다.

인프런 커뮤니티 질문&답변

제가 설정 잘못한걸까요?