환경에 따라 다양한 매개변수를 전달하기 위해 vue에서 Npm run build를 사용하는 방법

이번에는 vue에서 Npm run build를 사용하여 환경에 따라 다양한 매개변수를 전달하는 방법과 vue에서 Npm run build를 사용하여 환경에 따라 다양한 매개변수를 전달할 때 주의사항이 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

프로젝트 개발 중 백엔드 API 도메인 이름을 구성할 때 프런트엔드에서 매우 고민하는 경우가 자주 나타납니다.

로컬 개발 환경: api-dev.demo.com

테스트 환경: api-test.demo .com

온라인 제작 환경: api.demo.com,

이번에는 Vue.js 프로젝트에 패키지되어 있습니다. 사용 방법을 알려드리겠습니다.

npm run build --xxx 는 전달된 매개변수 xxx 환경에 따라 차이점을 확인하여 다른 도메인 이름 구성을 제공합니다. <code>npm run build -- xxx   ，根据传递参数xxx来判定不同的环境，给出不同的域名配置。

1.项目中/config/dev.env.js修改：

新增：HOST: '"dev"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 HOST: '"dev"'
})

2.项目中/config/prod.env.js修改：

获取传递进来的参数：

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
 NODE_ENV: '"production"',
 HOST: '"'+HOST+'"'
}

3.项目中ajax封装的地方修改：

/**
** 设置API接口域名
**/
let apiUrl = '';
// 根据 process.env.HOST 的值判断当前是什么环境
// 命令：npm run build -- test ，process.env.HOST就设置为：'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;
apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;

4.最后敲命令：

npm run build -- test

注意–是2个横杠， 后面跟参数，这样  process.env.HOST 就获取到参数  'test'  了,

apiUrl = 'http://api-test.demo.com'

若线上prod发布打包，npm run build -- prod

1. 프로젝트에서 /config/dev.env.js 수정:

New

: HOST: '"dev"'

apiUrl = 'http://api.demo.com'

2. 프로젝트에서 /config/prod.env.js를 수정합니다.전달된 매개변수 가져오기 :
rrreee

3. 프로젝트에서 ajax 패키지 수정:

rrreee4. 최종 명령:
npm run build -- test

🎜참고 – 두 개의 가로 막대와 그 뒤에 매개변수가 있으므로 process.env.HOST는 'test' 매개변수를 가져옵니다.🎜rrreee🎜 prod가 출시되어 온라인으로 패키징되면 npm run build -- prod🎜rrreee🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 도서: 🎜🎜🎜JS🎜🎜🎜🎜🎜Koa2 파일 업로드 및 다운로드 사용 방법🎜🎜🎜에서 new()의 기본 논리에 대한 자세한 설명

위 내용은 환경에 따라 다양한 매개변수를 전달하기 위해 vue에서 Npm run build를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!