> 웹 프론트엔드 > JS 튜토리얼 > Vue 프로젝트는 환경별로 어떻게 패키징되어야 하나요?

Vue 프로젝트는 환경별로 어떻게 패키징되어야 하나요?

php中世界最好的语言
풀어 주다: 2018-04-08 14:31:32
원래의
2575명이 탐색했습니다.

이번에는 Vue 프로젝트를 환경별로 패키징하는 방법을 보여드리겠습니다. Vue 프로젝트 패키징에 대한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

프로젝트 개발에 있어서 저희 프로젝트는 크게 개발 버전, 테스트 버전, Pre 버전, Prod 버전으로 나누어집니다. Vue-cli의 기본 환경은 dev와 prod뿐입니다. 예전에는 테스트 버전이나 Pre 버전을 출시하려고 할 때마다 소스코드에서 API 주소를 수정한 후 패키징해야 해서 매우 번거로웠습니다. . 다양한 환경에 맞게 포장할 수 있다면 완벽할 것입니다. 인터넷에서 많은 정보를 모았으니 이제 환경에 맞게 프로그램을 패키징할 수 있겠네요. 어떻게 하면 되는지 두고 보겠습니다.

1단계: 설치 cross-env

cross-env를 설치하려면 프로젝트 디렉터리에서 다음 명령을 실행하세요. 제 IDE는 webstorm입니다. 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가 구성된 프록시 주소입니다.

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 VN_CONFIG: '"dev"',
 API_ROOT: '"api/apis/v1"'
})
로그인 후 복사

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

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

"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"
 },
로그인 후 복사

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

config/index.js 파일에서 빌드 매개변수를 수정합니다. 여기의 매개변수는 build/webpackage.prod.conf.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'),
로그인 후 복사

5단계에서 사용됩니다. webpackage.prod.conf.js의 빌드 환경 매개변수

를 사용하여 build/webpackage.prod.conf.js 파일을 수정하고 env 상수가 생성되는 방식을 조정하세요.

// 个性env常量的定义
// const env = require('../config/prod.env')
const env = config.build[process.env.env_config+'Env']
로그인 후 복사

6단계: build/build.js를 조정

process.env.NODE_ENV 할당을 삭제하고 스피너 정의를 수정합니다.

'use strict'
require('./check-versions')()
// 注释掉的代码
// process.env.NODE_ENV = 'production'
const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 修改spinner的定义
// const spinner = ora('building for production...')
var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
spinner.start()
//更多的其它内容,不需要做任何调整的内容 ...
로그인 후 복사

보충:

vue2+webpack이 환경에 따라 패키징되는 방식

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

 config/prod.env.js 파일에 구성이 필요합니다 

const target = process.env.npm_lifecycle_event;
  if (target == 'test') {
  //测试
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://test.gw.fdc.com.cn"',
  }
}else {
  //线上
  var obj = {
  NODE_ENV: '"production"',
  //post用当前域名
  API_ROOT: '""',
  //数据字典
  API_ROOT_DICT:'"http://gw.fdc.com.cn"',
  }
}
module.exports = obj;
로그인 후 복사

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

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

추천 자료:

Vue에서 슬롯/범위 슬롯을 사용하는 방법

Vue 구성 요소에서 슬롯 소켓 사용에 대한 자세한 설명

위 내용은 Vue 프로젝트는 환경별로 어떻게 패키징되어야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿