Vue 앱 빌드를 생성하려면 어떤 명령을 사용해야 합니까?

Vue 앱 빌드를 생성하려면 어떤 명령을 사용해야 합니까?

Vue 앱을 개발한 후 어떻게 해야 합니까?vue-cli

Angular에는 모든 스크립트를 하나의 스크립트로 번들하는 명령어가 있습니다.

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를Docker를 서버가 합니다.dist/디렉토리로 이동합니다.

도커 파일

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

응용 프로그램을 prod 환경에 배포하려면 다음과 같이 하십시오.

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

패키지의 스크립트에 포함되어 있습니다.json 파일.

main.js를 열고 추가합니다.

Vue.config.productionTip = false;

수입 직후에요.그런 다음 프로젝트 폴더에서 CLI를 열고 이 명령을 실행합니다.

npm run build

그러면 프로젝트 디렉토리에 dist 폴더가 생성됩니다. 호스트에 해당 dist 폴더를 업로드하면 웹 사이트가 활성화됩니다.

vue 설명서에는 다양한 호스트 제공자에 배포할 수 있는 방법에 대한 많은 정보가 나와 있습니다.

npm run build

이 정보는 package json file.scripts 섹션에서 확인할 수 있습니다.테스트, 개발 및 실가동용 빌드 스크립트를 제공합니다.

프로젝트의 github repo를 사이트에서 링크함으로써 프로젝트를 번들하는 netlify 등의 서비스를 사용할 수 있습니다.또, 헤로쿠등의 다른 사이트에 전개하는 방법에 대해서도 설명합니다.

자세한 내용은 이쪽에서 확인하실 수 있습니다.

실행할 특정 코드에 대한 명령어는 패키지 내에 나열되어 있습니다.스크립트 아래의 json 파일.다음은 제 예시를 보여드리겠습니다.

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

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

npm serve

실제 가동하기 위해 사이트를 준비하려면

npm build

이 명령어는 사이트의 압축 버전을 가진 dist 폴더를 생성합니다.

이것은 커스텀 폴더에 전개하기 위한 것입니다(예를 들어 URL/myApp/과 같이 루트가 아닌 앱을 원하는 경우). 이 답을 찾기 위해 한참을 기다렸습니다.도움이 됐으면 좋겠어요

VUE CLI는 https://cli.vuejs.org/guide/에서 입수하고 UI 빌드를 사용하여 쉽게 입수할 수 있습니다.그런 다음 설정에서 공용 경로를 /whattery/로 변경하고 URL/whattery로 링크할 수 있습니다.

이 비디오에서는 CLI를 사용하여 vue 앱을 만드는 방법에 대해 설명합니다.https://www.youtube.com/watch?v=Wy9q22isx3U

NPM = > npm의 경우, 실용 빌드 = > 실용 빌드 실행

패키지의 스크립트를 체크할 수도 있습니다.json 파일

프로젝트 루트에 다음 명령을 기록합니다.

npm run build

첫 번째 Vue CLI 글로벌 설치

npm install -g @vue/cli

새 프로젝트를 만들려면 다음을 수행합니다.

vue create project-name

을 실행하다

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 앱 생성

vue init webpack my-project

개발자 서버 실행

npm run dev

다음 명령어는 개발 서버를 시작하기 위한 것입니다.

npm run dev

여기서 이 명령어는 프로덕션 빌드에 사용됩니다.

npm run build

먼 곳
그런 다음 모든 파일을 서버에 푸시하기 시작합니다.

VUE-CLI를 사용하지 않고 모든 스크립트 파일을 하나의 fat js 파일로 번들한 후 해당 fat jascript 파일을 메인템플릿 파일로 참조하는 방법이 있습니다.

웹 팩을 번들러로 사용하여 프로젝트의 루트 디렉토리에 webpack.conig.js를 작성하는 것이 좋습니다.엔트리 포인트, 출력 파일, 로더 등의 모든 설정모두 그 설정 파일에 저장됩니다.그 후, 패키지에 스크립트를 추가합니다.webpack.config.js 파일을 사용하여 webpack 구성 및 파일 감시를 시작하고 webpack.config.js 파일의 지정된 위치에 Js 번들파일을 만듭니다.

vue-cli를 사용해도 될 것 같습니다.

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

백엔드와 별도로 프런트엔드 앱을 개발하고 있는 경우, 즉 백엔드가 프론트엔드와 통신할 수 있는 API를 공개하고 있는 경우 프런트엔드는 본질적으로 완전히 정적 앱입니다.dist 디렉토리의 빌드된 콘텐츠를 모든 정적 파일 서버에 배포할 수 있지만 올바른 baseUrl을 설정해야 합니다.

1. npm run build - 코드를 업데이트 및 최소화합니다.

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

3. Firebase 호스팅에 관심이 있을 수 있는 무료 호스팅 서비스입니다.

vue-cli 및 웹 팩을 사용한 경우.

사용할 수 있습니다.

npm 명령어를 명령줄에서 실행하면 프로젝트에 dist 폴더가 생성됩니다.이 폴더의 내용을 FTP에 업로드하면 됩니다.

npm을 사용하고 있다면npm run build하지만 실을 사용한다면 간단히 실행할 수 있습니다.yarn build

리모트 서버의 구축과 송신을 실시하는 경우는, cli-service 를 사용할 수 있습니다(https://cli.vuejs.org/guide/cli-service.html) 에서는, 특정의 플러그 인을 사용해 서비스, 빌드, 및 전개하는 태스크를 작성할 수 있습니다.vue-cli-plugin-s3-deploy

언급URL : https://stackoverflow.com/questions/42936588/which-command-do-i-use-to-generate-the-build-of-a-vue-app