npm run dev 실행 시 Cannot Get/ 오류

Question

안녕하세요. 제로초님. < html > < head > < meta charset ="UTF-8" > < meta name ="view-port" content ="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" > < meta http-equiv ="X-UA-Compatible" content ="ie=edge" > < title > 반응속도 체크 < body > < div id ="root" > < script src =" dist/app.js " > 위 코드에서 src="dist/app.js" 부분에 cannot resolve directory 'dist' / cannot resove file 'app.js' 에러가 뜨는데요. dist 폴더가 없을 때 강사님께서는 이와 같은 에러가 없는 반면, 저는 webpack-dev-server가 4 이상을 써서이렇게 되는 것인지.. 대체 어떤 곳에서 문제가 발생하는지를 잘 모르겠네요.ㅜㅜ webpack serve --env development로 실행을 했을 때 서버는 정상적으로 실행은 또 되는데 Cannot Get/ 에러가 뜨네요... dist/app.js 로 인한 문제인 것인지... 실례가 되지 않는다면 어떻게 해결해야 할지 팁을 주실 수 있으실까요? 아래는 1. pagekage.json 2. webpack.config.js 3. npm run dev 실행 후 터미널 로그 4. 브라우저 실행 화면 입니다. [package.json] { "name" : "response-check" , "version" : "1.0.0" , "description" : "" , "main" : "index.js" , "scripts" : { "build" : "webpack --watch" , "dev" : "webpack serve --env development" } , "author" : "" , "license" : "ISC" , "dependencies" : { "vue" : "^2.6.14" } , "devDependencies" : { "css-loader" : "^6.5.1" , "vue-loader" : "^15.9.8" , "vue-style-loader" : "^4.1.3" , "vue-template-compiler" : "^2.6.14" , "webpack" : "^5.62.1" , "webpack-cli" : "^4.9.1" , "webpack-dev-server" : "^4.4.0" } } [webpack.config.js] const VueLoaderPlugin = require ( 'vue-loader/lib/plugin' ) ; const path = require ( 'path' ) ; module . exports = { mode : 'development' , devtool : 'eval' , devServer : { port : 8080 , } , resolve : { extensions : [ '.js' , '.vue' ] , } , entry : { app : path . join ( __dirname , 'main.js' ) , } , module : { rules : [ { test : /\.vue$/ , use : 'vue-loader' , } , { test : /\.css$/ , use : [ 'vue-style-loader' , 'css-loader' , ] , } , ] , } , plugins : [ new VueLoaderPlugin () , ] , output : { filename : '[name].js' , path : path . join ( __dirname , 'dist' ) , publicPath : '/dist' , } , } ; [webpack serve --env development] 실행 후 터미널 로그 =================================================== [webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:8080/ [webpack-dev-server] On Your Network (IPv4) [webpack-dev-server] Content not from webpack is served from 'C:\Users\programming\vue-webgame\4.반응속도체크\pu blic' directory asset app.js 559 KiB [emitted] (name: app) runtime modules 26.3 KiB 13 modules modules by path ./node_modules/ 441 KiB modules by path ./node_modules/webpack-dev-server/client/ 52.7 KiB 12 modules modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules modules by path ./node_modules/url/ 37.4 KiB 3 modules modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules modules by path ./node_modules/vue-style-loader/lib/*.js 6.71 KiB 2 modules modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules modules by path ./*.vue 5.71 KiB 8 modules ./main.js 113 bytes [built] [code generated] webpack 5.62.1 compiled successfully in 2558 ms =============================================== [브라우저 실행 화면]

zerocho · Answer

/dist/app.js 또는 ./dist/app.js로 바꿔서 해보세요.