Vue 환경은 매개변수를 전달하여 다양한 도메인 이름 코드 분석을 패키지화합니다.

이번에는 다양한 도메인 이름을 패키징하기 위한 vue 환경 전달 매개변수에 대한 분석을 가져오겠습니다. 다양한 도메인 이름 패키징을 위한 vue 환경 전달 매개변수에 대한 주의사항은 무엇입니까?

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

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

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

사용 npm run build --xxx , 전달된 매개변수 xxx에 따라 다양한 환경을 결정하고 다양한 도메인 이름 구성을 제공합니다. 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 중국어 웹사이트의 다른 관련 기사를 확인해보세요! 🎜🎜추천도서 : 🎜🎜🎜vue2 장바구니 구현 및 주소 선택 사례 분석 🎜🎜🎜🎜🎜vue 전체 선택 및 역선택 기능 사례 분석 구현 🎜🎜🎜

위 내용은 Vue 환경은 매개변수를 전달하여 다양한 도메인 이름 코드 분석을 패키지화합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!