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

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

php中世界最好的语言원래의: 2018-05-02 14:23:361243검색

이번에는 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"'
}

Revise 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!