이미 구축된 Vue JS 앱에 매개 변수를 전달하려면 어떻게 해야 합니까?
웹 서비스에 연결하여 데이터를 가져오는 Vue 앱이 있습니다.웹 서비스 URL은 앱을 설치하는 위치에 따라 다릅니다.
처음에 생각난 건.env
하지만 나중에 깨달은 건 이 파일들이 최소화된 파일에.js
파일을 표시합니다.
내 안에 이런 게 있어서main.js
의 경우 매우 편리했다.env
파일:
Vue.prototype.ApiBaseUrl = process.env.VUE_APP_APIBASEURL
Vue.prototype.PrintDocsFolder = process.env.VUE_APP_PRINTDOCSFOLDER
Vue.prototype.TicketPrintWSocket = process.env.VUE_APP_TICKETPRINTWSOCKET
앱은 이미 구축되어 있습니다.우리가 전개해야 하는 100개소마다 앱을 만들고 싶지 않다.이에 대한 "공식적" 접근법에 대해서는 잘 모르겠습니다.
Vue에서 이 구성을 허용하는 즉시 사용 가능한 솔루션이 있습니까?기본적으로 빌드된 앱의 루트 폴더에 파일이 있어야 하며, 이 파일의 값을 읽어야 합니다.Vue.prototype.VARIABLES
.
사용하고 있습니다.vue-cli
3.
다른 사용자가 말했듯이 네트워크 요청을 통해 런타임에 이 작업을 수행할 수 있습니다.라이브가 될 때까지 도입처를 모르는 경우는, 다음과 같은 조작을 실시할 필요가 있습니다.
또는 인프라 및 네트워킹 수준에서 이 작업을 수행할 수 있습니다.때로는 A/B 테스트 시스템의 경우 그렇게 처리될 수 있습니다.
또는 빌드 시 이 작업을 수행할 수 있습니다.둘 다 해봤는데...이미지와 같은 정적 자산의 경우 실행 시 이 작업을 수행할 수 없으며 빌드 시 공용 URL을 교체해야 할 수 있습니다.네트워크 요청 접근 방식의 경우 호스트하는 매핑이 포함된 정적 json 파일을 가져올 수 있습니다.
당신은 이 제품을 사용하는 것에 대해 매우 근접해 있었습니다..env
파일을 표시합니다.
Vue CLI를 사용한 빌드 타임 어프로치
Vue CLI에서는 .env 파일에 다음과 같이 접두사가 붙은 변수를 지정하여 웹 팩의 DefinePlugin을 무료로 사용할 수 있습니다.VUE_APP_THE_API_URL
그리고 나서 그것을 마치process.env.VUE_APP_THE_API_URL
. 문서.
사용.
소스 내에서process.env.VUE_APP_THE_API_URL
및 .env 파일.소스 코드의 API URL을 다음과 같이 참조합니다.process.env.VUE_APP_THE_API_URL
그 다음, 이 명령어를 사용해 주세요..env
dev-only 값과 production-only 값 사이에서 전환할 수 있습니다.
프로덕션 전용 값은 가짜이며 매우 고유하기 때문에 + 교환 시 구별됩니다.
검색 + 가짜 API 교체_작성한 URL
실가동용 애플리케이션 구축이 완료되면 전개하는 API URL이 포함된 매핑파일(json, js 등)을 루프합니다.
파일 시스템을 사용하여 필요한 횟수만큼 앱을 복제한 후 S3를 통해 배포하는 등의 작업을 신속하게 수행할 수 있습니다.이 조작은, 다음과 같이 할 수 있습니다.bash
스크립트 또는 사용node + execa
또는node + fs
.
이 작업이 필요한 이유
웹 팩 로더에서는 퍼블릭 경로와 같은 것을 하드 코드화하므로 실행 시 특정 자산을 수정할 수 없기 때문에 빌드 시 이 작업을 수행해야 했습니다.수백 개의 API/CDN URL을 사용하면 애플리케이션을 반복적으로 재구축하는 것은 매우 비효율적입니다.
Vue CLI를 사용하는 방법(필요 없는 경우)VUE_APP_*
)
Vue CLI는 웹 팩의 최상위에 있으며 이는 고급 사용 사례이기 때문에configureWebpack
의 내부에vue.config.js
그것을 가리키다require('webpack.config.js')
웹 팩 또는 빌드 프로세스(bash, node, gulp 등) 내에서 이 작업을 수행할 수 있습니다.
Vue CLI 3은 메이저 Web Pack 버전에 관련되어 있습니다.지금은 웹팩 4입니다.당신의 문제에 대한 Webpack 4의 답변을 드리려고 합니다만, Webpack v5의 플러그인 이름을 변경하고 있는 것 같습니다.
플러그인 정의
원하는 플러그인은 DefinePlugin입니다.위의 단계만 수행해도 수동으로 설정할 수 있습니다.{ plugins: [ new DefinePlugin() ] }
원하는 옵션을 선택할 수 있습니다.네가 하기 싫으면 이렇게 했을 거야VUE_APP_*
env 변수의 접두사로 사용됩니다.
앱이 위치별로 서로 다른 API/패럴을 사용하여 배포되어야 하는 위치가 말 그대로 100개라면AND YOU DON'T WANT TO LEAVE ANY TRACE OF THE WHOLE DATA
앱의 적절한 기능에 필요한 변수와는 별도로, 저는 개인적으로 모든 다른 파라미터를 하나의 중앙 데이터베이스에 저장하고 어떤 특정 전개에 어떤 파라미터를 공급할지 결정할 수 있는 하나의 공통 API를 만들 것입니다.따라서 초기 앱 로드 시 앱이just have to make 1 extra API to call to get the correct params
. (각 배치에 고유한 식별자가 있는 경우)
예를 들어, 고유 식별자가 앱이 제공되는 도메인 이름인 경우.다음과 같은 매개 변수를 데이터베이스에 저장할 수 있습니다.
+-------------------+----------------------------+-----------------+--------------------+--+
| domainName | ApiBaseUrl | PrintDocsFolder | TicketPrintWSocket | |
+-------------------+----------------------------+-----------------+--------------------+--+
| example.com | http://api-base-url-1.com/ | print-doc-1 | ticket-print-1 | |
+-------------------+----------------------------+-----------------+--------------------+--+
| secondExample.com | http://api-base-url-2.com/ | print-doc-2 | ticket-print-2 | |
+-------------------+----------------------------+-----------------+--------------------+--+
| thirdExample.com | http://api-base-url-3.com/ | print-doc-3 | ticket-print-3 | |
+-------------------+----------------------------+-----------------+--------------------+--+
앱 로드 시 Promise based HTTP client (Promise based HTTP client) 호출을 하고,current domain name
다음과 같이 합니다.
const details = await axios.get('/common-api-with-all-the-details', {
params: {
domainName: location.hostname
});
이 공통 API는 도메인과 db를 일치시키고 그에 따라 올바른 레코드를 가져옵니다.
장점:
- 앱을 재구축하거나 환경 변수를 개별적으로 구성할 필요가 없습니다.
- 어떤 특정 전개의 대상이 되는 파라메타를 항상 제어할 수 있습니다.
- FLY의 매개 변수를 변경/업데이트할 수 있습니다.
- 전체 데이터 저장소가 공개되지 않았습니다.
단점:
- 추가 서버 셋업이 1개 필요합니다.
- 앱 최초 로딩 시 추가 API 호출 1회.
기타 접근법:
데이터 집합이 너무 크지 않은 경우 모든 세부 정보를 배열에 저장하여 데이터베이스 사용을 방지할 수 있습니다.그러면 공통 API 호출 때마다 도메인 이름을 어레이와 일치시킬 수 있습니다(lodash가 도움이 됩니다).이것에 의해, 응답 시간이 단축되어 복잡성이 경감되어 데이타베이스의 셋업이 완전하게 회피됩니다.
서버리스 아키텍처를 사용하면 COMMON API, Firebase Cloud 함수 또는 AWS Lambda에 충분한 양의 트래픽을 처리할 수 있는 넉넉한 빈 계층이 있는 완전히 새로운 서버를 설정하지 않아도 됩니다.
이것은 URL(예를 들어 로컬 JSON 파일)을 만들고 데이터 내용을 읽는 것만으로 수행할 수 있습니다.
예를 들어 (95%의 브라우저에서 지원)를 사용하여 설정을 요구할 수 있습니다.<projectroot>/config.json
할 수 를 선택한 (전개 장소마다 고유할 수 있음).다음 결과에 따라 글로벌속성을 설정합니다.
// main.js
fetch('config.json')
.then(res => res.json())
.catch(error => {
// ignore any errors
console.warn(error)
return {}
})
.then(config => {
Vue.prototype.ApiBaseUrl = config.ApiBaseUrl
Vue.prototype.PrintDocsFolder = config.PrintDocsFolder
Vue.prototype.TicketPrintWSocket = config.TicketPrintWSocket
// initialize app here
new Vue(...)
})
언급URL : https://stackoverflow.com/questions/63848765/how-can-we-pass-parameters-to-an-already-built-vue-js-app
'IT' 카테고리의 다른 글
JavaScript에서 CSS 클래스를 동적으로 생성하여 적용하는 방법 (0) | 2022.11.08 |
---|---|
$에 대한 경고HTTP_RAW_POST_DATA가 폐지되었습니다. (0) | 2022.11.08 |
절차에서 테이블 이름을 쉽게 바꿀 수 있는 방법이 있습니까? (0) | 2022.11.08 |
문자열의 첫 번째 문자가 숫자인지 확인하려면 어떻게 해야 하나요? (0) | 2022.11.08 |
JPA 빠른 가져오기가 가입되지 않음 (0) | 2022.11.08 |