집 > 기사 > 웹 프론트엔드 > 환경별로 Vue 프로젝트를 패키징하는 방법

환경별로 Vue 프로젝트를 패키징하는 방법

php中世界最好的语言원래의: 2018-04-11 13:35:021801검색

이번에는 Vue 프로젝트를 환경별로 패키징하는 방법을 알려드리겠습니다. Vue 프로젝트를 환경별로 패키징할 때의 주의사항은 무엇인가요?

1단계: 교차 환경 설치

크로스 환경을 설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요. 내 IDE는 webstorm입니다. IDE의 터미널 창에서 직접 실행할 수도 있습니다. Windows CMD 또는 Linux 터미널을 통해 프로젝트 루트 디렉터리로 이동하여 실행할 수도 있습니다. 다음 명령.

npm i --save-dev cross-env

2단계: 각 환경에서 매개변수 수정

config/ 디렉터리에 test.env.js 및 pre.env.js를 추가합니다. prod.env.js의 내용을 수정하면 다음과 같습니다.

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 EVN_CONFIG:'"prod"',
 API_ROOT:'"/apis/v1"'
}

test.env.js 및 pre.env.js 파일의 내용을 각각 학습하고 수정한 내용은 다음과 같습니다.

'use strict'
module.exports = {
 NODE_ENV: '"testing"',
 EVN_CONFIG:'"test"',
 API_ROOT:'"/test/apis/train"'
}
'use strict'
module.exports = {
 NODE_ENV: '"presentation"',
 EVN_CONFIG:'"pre"',
 API_ROOT:'"/pre/apis/train"'
}

dev.env.js 파일의 내용을 수정합니다. 수정된 내용은 다음과 같습니다. 개발 환경은 서비스 프록시로 구성되어 있으며 API_ROOT 이전의 api는 구성된 프록시 주소입니다.

rreee

3단계: 프로젝트 package.json 파일 수정

package.json 파일의 스크립트 콘텐츠를 개인화하고 환경에 대해 새로 정의된 여러 패키징 프로세스를 추가하세요. 해당 매개변수는 이전 조정과 일치합니다.

rreee

여기서는 NODE_ENV를 프로덕션으로 설정하는 것이 가장 좋습니다. 왜냐하면 utils.js에서는 프로덕션에 대한 판단이 한 번만 이루어지고 개인 테스트는 각 환경의 API 매개변수에 영향을 미치지 않기 때문입니다. ##4단계: config/index.js 수정

config/index.js 파일에서 빌드 매개변수를 수정하세요. 여기의 매개변수는 build/webpackage.prod.conf.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})

에서 사용됩니다. 5단계: webpackage.prod.conf.js

에서 빌드 환경 매개변수 사용 build/webpackage.prod.conf.js 파일을 수정하고 envconstants 생성 방식을 조정하세요.

rreee

6단계: build/build.js

조정 process.env.NODE_ENV 할당을 삭제하고 spinner 정의를 수정합니다.

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "build:test": "cross-env NODE_ENV=production env_config=test node build/build.js",
  "build:pre": "cross-env NODE_ENV=production env_config=pre node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
 },

추가됨:

환경별 vue2+webpack 패키징 방법

올해 저는 vue2 단일 페이지 애플리케이션 프로젝트를 진행할 기회가 있었고, 개발부터 출시까지 두 가지 환경을 거쳤습니다. 테스트 환경과 공식 환경 모두에서 npm run을 실행합니다. 짓다. 현재 이 두 환경의 변수는 서로 다르기 때문에 패키징할 때마다 변수를 변경하는 것이 조금 번거롭게 느껴집니다. 나중에 나는 동료들에게 그들의 프로젝트에서 환경에 따라 다른 명령을 실행하고 다른 패키지를 얻었습니다. 예를 들어 테스트 환경 npm 테스트 실행, 공식 환경 npm 실행 빌드.

config/prod.env.js 파일에서 구성해야 합니다.

build:{
  // Template for index.html
  // 添加test pre prod 三处环境的配制
  prodEnv: require('./prod.env'),
  preEnv: require('./pre.env'),
  testEnv: require('./test.env'),
  //下面为原本的内容，不需要做任何个性
  index:path.resolve(dirname,'../dist/index.html'),

npm은 pretest, test, posttest 등 현재 실행 중인 스크립트의 이름을 반환하는 npm_lifecycle_event 변수를 제공합니다. 따라서 이 변수를 사용하여 동일한 스크립트 파일에 다양한 npm 스크립트 명령에 대한 코드를 작성할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!