vue.js cli 명령어 "npm run serve" 작동 방식

vue.js cli 명령어 "npm run serve" 작동 방식

실행 후npm run serve그것은 다음과 같은 주소를 준다.http://localhost:8080동작합니다.이 주소는 로컬서버의 루트 폴더를 대상으로 하고 있습니다만, 제 프로젝트는 다음과 같은 다른 폴더가 존재합니다.http://localhost/vue

그리고 제 질문은 어떻게 주소가http://localhost:8080실제는 어디에 있습니까?index.html? 실제 프로젝트 배치 이후localhost/vue폴더! 주소는 http://localhost/vue여야 합니다.

서브를 사용할 때 백그라운드에서 무슨 일이 일어나고 있는지 좀 헷갈리시는 것 같아요.

명령어를 실행하고 있는 경우npm run serve프로젝트는 웹 팩에 의해 구축되고 로컬 http-server를 통해 "제공"됩니다.이 서버는 프로젝트의 빌드 폴더를 루트로 사용하고 있습니다.

다음 이름의 폴더를 만든 것 같습니다.localhost여기서의 코멘트를 참조해 주세요.이 폴더는 컴퓨터에서 "localhost"라고 불리는 폴더가 아닙니다.실제로는 내부 IP 이름인127.0.0.1에 불과합니다.테스트하려면 127.0.0.1:8080으로 이동하여 http://localhost:8080과 동일하게 표시합니다.

프로그램적인 용어로 다음과 같이 말할 수 있습니다.localhost == 127.0.0.1

그 외에도, 당신은 이름이 붙은 하위 폴더가 있을 것이라고 예상하지 않는 것 같습니다.vue그게 바로 당신이 가지고 있는 것이니까localhost폴더입니다.위의 사항을 알고 있을 것, 폴더가 아니다.localhost를 클릭합니다.단, 이 폴더는 http-server가 선택한 폴더입니다.이 경우 vue가 폴더를 선택합니다./dist프로젝트 폴더 안에 있습니다.

예:프로젝트 폴더에는 다음 경로가 있습니다.C:\Users\Admin\Documents\myProject

그 후 실행했을 때npm run serve이 폴더에서는 vue http-server가 폴더에 서비스를 제공합니다(호스트).C:\Users\Admin\Documents\myProject\dist

즉,http://localhost == C:\Users\Admin\Documents\myProject\dist\index.html

단, 프로젝트를 다음과 같은 용도로 사용하는 것이 목표인 경우:

다음 항목을 추가하여 vue 프로젝트의 vue.config.js를 편집해야 합니다.

vue.config.disc의 예:

module.exports = {
  publicPath: '/my-custom-sub-folder',
};

index.default 파일은 기본적으로 프로젝트의 루트에 있는 "public" 폴더에 있어야 합니다.

언급URL : https://stackoverflow.com/questions/64342233/how-vue-js-cli-command-npm-run-serve-work