[vue.js] Vue 앱을 배포하는 방법은 무엇입니까?

Vue 앱을 개발 한 후 어떻게해야하나요 vue-cli?

에서 각도 하나의 스크립트에 모든 스크립트를 번들로 몇 가지 명령이 있었고, 그 다음이 파일은 호스트로 전송됩니다.

Vue에 동일한 것이 있습니까?



답변

다음과 같이 프로젝트를 만든 것 같습니다.

vue init webpack myproject

글쎄, 이제 당신은 실행할 수 있습니다

npm run build

index.html 및 / dist / 폴더를 웹 사이트 루트 디렉토리에 복사하십시오. 끝난.


답변

다음을 사용하여 프로젝트를 만든 경우 :

vue init webpack myproject

NODE_ENV프로젝트에 개발 및 프로덕션 모두에 대해 구성된 웹 팩이 있으므로 프로덕션 으로 설정 하고 실행 해야합니다 .

NODE_ENV=production npm run build

dist/웹 사이트 루트 디렉토리에 디렉토리를 복사 합니다.

Docker를 사용하여 배포하는 경우 dist/디렉터리를 제공하는 익스프레스 서버가 필요합니다 .

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]


답변

터미널에서

npm run build

dist 폴더를 호스팅합니다. 자세한 내용은이 비디오 를 참조 하십시오.


답변

당신이 당신의 경로에 문제가 발생하면, 아마도 당신은을 변경할 필요가 assetPublicPath당신에 config/index.js당신의 하위 디렉토리에 파일을

http://vuejs-templates.github.io/webpack/backend.html


답변

실행할 특정 코드에 대한 명령은 스크립트 아래 package.json 파일에 나열됩니다. 다음은 내 예입니다.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

사이트를 로컬에서 실행하려는 경우 다음을 사용하여 테스트 할 수 있습니다.

npm serve

프로덕션을 위해 사이트를 준비하려는 경우

npm build

이 명령은 사이트의 압축 버전이있는 dist 폴더를 생성합니다.


답변

응용 프로그램을 prod 환경에 배포하려면

"build": "vue-cli-service build --mode prod"

package.json 파일의 스크립트에 있습니다.

main.js를 열고 추가하십시오.

Vue.config.productionTip = false;

수입 직후. 그런 다음 프로젝트 폴더에서 cli를 열고이 명령을 실행하십시오.

npm run build

그러면 프로젝트 디렉토리에 dist 폴더가 만들어지고 호스트에 해당 dist 폴더를 업로드 할 수 있으며 웹 사이트가 라이브됩니다.


답변

이 명령은 개발 서버를 시작하기위한 것입니다.

npm run dev

이 명령은 프로덕션 빌드 용입니다.

npm run build

‘dist’라는 생성 된 폴더를 확인하고 내부로 이동하십시오.
그런 다음 모든 파일을 서버로 푸시하십시오.