환경의 전달 매개변수에 따라 vue가 다양한 도메인 이름을 패키징하는 방법에 대한 자세한 설명

이번에는 Vue가 환경의 전달 매개변수에 따라 다양한 도메인 이름을 패키징하는 방법에 대해 자세히 설명합니다. Vue가 환경의 전달 매개변수에 따라 다양한 도메인 이름을 패키징하는 데 사용하는 주의 사항은 무엇입니까? 살펴보자.

프로젝트 개발 중 백엔드 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 수정:

추가됨: HOST: '"dev"'

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

2. project.env.js 수정:

전달된 매개변수 가져오기: rrreee
3. 프로젝트의 ajax 패키지 수정:

rrreee

4. 명령: npm run build -- test

참고 – 두 개의 가로 막대가 있고 그 뒤에 매개변수가 있으므로 process.env.HOST는 'test' 매개변수를 가져옵니다. 🎜rrreee🎜 prod가 온라인으로 출시되어 패키징된 경우 npm run build -- prod🎜rrreee🎜이 기사의 사례를 읽으신 후 방법을 숙달하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요! 🎜🎜추천 자료: 🎜🎜🎜vue는 전체 선택 및 역선택 기능을 제공합니다🎜🎜🎜🎜🎜vue.js element-ui 트리 트리 제어 iview 수정 방법🎜🎜🎜

위 내용은 환경의 전달 매개변수에 따라 vue가 다양한 도메인 이름을 패키징하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!