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'라는 생성 된 폴더를 확인하고 내부로 이동하십시오.
그런 다음 모든 파일을 서버로 푸시하십시오.

VUE-CLI를 사용하지 않고이 작업을 수행하는 한 가지 방법은 모든 스크립트 파일을 하나의 fat js 파일로 묶은 다음 해당 big fat javascript 파일을 기본 템플릿 파일로 참조하는 것입니다.

webpack을 번 들러로 사용하고 프로젝트의 루트 디렉토리에 webpack.conig.js를 만드는 것을 선호합니다. 진입 점, 출력 파일, 로더 등과 같은 모든 구성은 모두 해당 구성 파일에 저장됩니다. 그 후 webpack 구성을 위해 webpack.config.js 파일을 사용하는 package.json 파일에 스크립트를 추가하고 파일 감시를 시작하고 webpack.config.js 파일의 언급 된 위치에 Js 번들 파일을 만듭니다.

vue-cli를 사용할 수 있다고 생각합니다.

배포의 일부로 정적 자산을 처리하는 백엔드 프레임 워크와 함께 Vue CLI를 사용하는 경우 Vue CLI가 올바른 위치에 빌드 된 파일을 생성하는지 확인한 다음 백엔드 프레임 워크의 배포 지침을 따르기 만하면됩니다. .

백엔드와 별도로 프런트 엔드 앱을 개발하는 경우 (예 : 백엔드가 프런트 엔드와 통신 할 수있는 API를 노출하는 경우) 프런트 엔드는 본질적으로 순전히 정적 앱입니다. dist 디렉터리의 빌드 된 콘텐츠를 정적 파일 서버에 배포 할 수 있지만 올바른 baseUrl을 설정해야합니다.

1. npm run build-이것은 코드를 uglify하고 축소합니다.

2. 웹 사이트의 루트 디렉토리에 index.html 및 dist 폴더를 저장합니다.

3. 관심을 가질만한 무료 호스팅 서비스-Firebase 호스팅.

프로젝트를 만들 때 vue-cli 및 webpack을 사용한 경우.

그냥 사용할 수 있습니다

npm 은 명령 줄에서 빌드 명령을 실행하면 프로젝트에 dist 폴더가 생성됩니다. 이 폴더의 내용을 FTP에 업로드하고 완료하십시오.

이것은 사용자 지정 폴더에 배포하기위한 것입니다 (예 : URL / myApp /과 같이 루트에 앱이없는 경우)-이 답변을 찾기 위해 오랫동안 찾았습니다 ... 누군가에게 도움이되기를 바랍니다.

https://cli.vuejs.org/guide/ 에서 VUE CLI를 다운로드 하고 UI 빌드를 사용하여 쉽게 만드십시오. 그런 다음 구성에서 공용 경로를 / whatever /로 변경하고 URL / whatever에 연결할 수 있습니다.

도움이 더 필요한 경우 CLI를 사용하여 vue 앱을 만드는 방법을 설명하는이 비디오를 확인하십시오. https://www.youtube.com/watch?v=Wy9q22isx3U

vue 문서는 다른 호스트 공급자에 배포하는 방법에 대한 많은 정보를 제공합니다.

npm run build

패키지 json 파일에서 찾을 수 있습니다. 스크립트 섹션. 테스트 및 개발을위한 스크립트와 프로덕션 용 빌드를 제공합니다.

사이트에서 프로젝트의 github 저장소를 연결하여 프로젝트를 번들로 제공하는 netlify와 같은 서비스를 사용할 수 있습니다. 또한 heroku와 같은 다른 사이트에 배포하는 방법에 대한 정보도 제공합니다.

여기 에서 자세한 내용을 확인할 수 있습니다.

먼저 전 세계적으로 Vue Cli 설치

npm install -g @vue/cli

새 프로젝트를 만들려면 다음을 실행하세요.

vue create project-name

vue 실행

npm run serve 

Vue CLI> = 3은 동일한 vue 바이너리를 사용하므로 Vue CLI 2 (vue-cli)를 덮어 씁니다. 레거시 vue init 기능이 여전히 필요한 경우 글로벌 브리지를 설치할 수 있습니다.

전 세계적으로 Vue Init

npm install -g @vue/cli-init

vue init는 이제 vue-cli@2.x와 똑같이 작동합니다.

Vue Create 앱

vue init webpack my-project

개발자 서버 실행

npm run dev

빌드하여 원격 서버로 보내려면 cli-service ( https://cli.vuejs.org/guide/cli-service.html )를 사용하여 서비스, 빌드 및 배포 할 작업을 만들 수 있습니다. 특정 플러그인vue-cli-plugin-s3-deploy