Nuxt 환경별 구분 방법

배경

일반적인 상황에서 우리의 프로젝트는 서로 다른 환경을 구분하여 대응하는 전략을 결정해야 한다. 인터페이스 전송 주소, 패키지 정책, 로그 출력 정책 등을 포함하지만 국한되지 않는다.그렇다면 구체적으로 어떤 내용을 설정해야 하는지를 떠나 환경을 구분하는 능력이 있어야만 이런 일을 할 수 있다.그럼 Nuxt는 우리에게 이런 기본 능력을 제공했습니까?답은 긍정적이다.
다음은 서로 다른 환경이 틀림없이 다른 인터페이스 전송 주소를 예로 들어 관련 설명을 드리겠습니다.

nuxt.config.js

Nuxt 프레임워크로 개발된 학우들은 이 프로필이 낯설지 않다고 믿는다. 그러면 본고는 이 안의 구체적인 프로필 중 하나가axios의 프로필이다.설정된 주소는 변수에 달려 있습니다. 이 변수는 확실하지 않습니다.구성 코드는 다음과 같습니다.
비고:axios 및proxy에 대한 설정은 저의 다른 글을 참고하십시오.

export default {
 modules: ["@nuxtjs/axios"],
 axios: {
        //  
        proxy: true,
        //  
        retry: {
            retries: 3,
        },
        //  debug
        debug: !isProd,
        //  
        withCredentials: true,
        timeout: 2000,
    },
proxy: {
        "/api": {
            changeOrigin: true,
            target: targetUrl,
            pathRewrite: {
                "^/api": "/api",
            },
        }
   }
}

핵심 매개 변수

isProd , targetUrl
그 중에서 서로 다른 환경의 주소를 우리는 정적 유지보수를 할 수 있고 환경 표지에 따라 대응하는 환경 주소를 사용할 수 있으며 생산 환경인지 아닌지도 환경 표지를 통해 제어할 수 있다.
우리의 서로 다른 환경의 설정 사전이 이렇다고 가정하십시오. (프로필을 따로 쓰는 config.js를 권장합니다.)
비고: 그 중에서 사전 발송 환경은 생산 환경과 도메인 이름 설정이 다른 것을 제외하고 가능한 한 일치하도록 권장합니다. 가능한 한 이상한 문제를 미리 설정할 수 있습니다.

export default {
    dev: "http://dev.xxx.net/",
    stable: "https://stable.xxx.net/",
    pre: "https://pre.xxx.com/",
    prod: "http://xxx.com/",
}

그러면 정의 변수를 사용하면 다음과 같습니다.

const isProd = process.env.NODE_ENV === "prod";
const targetUrl = serverConfig[ process.env.NODE_ENV || 'stable'];

그럼 프로세스.env.NODE_엔브이는 어떻게 정의를 내렸나요?우리는 프로젝트 개발의 서로 다른 단계에 따라 구분하여 처리한다.
개발 단계 설정 변수
npm에 이러한 소스 라이브러리가 있는데 크로스플랫폼의 설정node 변수를 실현할 수 있다. 이것은 바로cross-env,npm 모듈 주소:https://www.npmjs.com/package/cross-env이다. 어떻게 설치하면 군더더기 없이 설명할 수 있다.
로컬 개발은 일반적으로 npmrun dev를 실행하고 기본 패키지 파일의 실행 명령에는 환경을 구분하는 설정이 없기 때문에 간단하게 처리하면 패키지 파일의 실행 가능한 스크립트에 대응하는 실행 가능한 스크립트를 추가할 수 있습니다. 그 목적은 환경을 전환하기 위해 끊임없이 내 프로필을 수정하거나 주석을 통해 어떤 파일을 수정할지 선택하지 않으려는 것입니다. 또한 개발 습관에 더욱 부합됩니다.일반적인 상황에서, 우리도 각 환경이 디버깅 기능을 왔다 갔다 전환하지 않는다.
package.json에 추가된 실행 가능한 명령: 여기서 우리가 정의한 NODE_ENV 값은 구성 파일에 대한 키 값입니다. 일관성을 유지하십시오.

 "scripts": {
    "dev": "cross-env NODE_ENV=dev nuxt",
    "dev-stable": "cross-env NODE_ENV=stable nuxt",
    "dev-pre": "cross-env NODE_ENV=pre nuxt",
    "dev-prod": "cross-env NODE_ENV=prod nuxt"
 }

배치 단계

배치 단계는 상식적으로 우리는 최종적으로 서버 프로세스가 지키는 배치가 틀림없다는 것을 알고 있다. npmrunstart와 같은 방식으로 배치하는 것은 아니다.따라서 대응하는 도입pm2는 기본 선형이고pm2의 생태에서는 프로필 배치를 지원합니다.루트 디렉터리에서 에코시스템을 만들 수 있습니다.config.js, 그리고 기본적인 내용은 다음과 같습니다. 그 중에서 env_xx의 부분은pm2에서 환경 변수를 설정하는 부분을 지원하는 부분입니다.cross-env보다 변수를 설정하는 방식이 더욱 간결하고 js의 기본 대상 형식입니다.유지도 설정 NODE_ENV 및 해당 env ID를 사용하면 됩니다.

module.exports = {
  apps: [
    {
      name: 'demo_pc',
      exec_mode: 'cluster',
      instances: '2', // Or a number of instances
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      log_date_format:'hxpc_YYYY-MM-DD HH:mm Z',
      log_file:'pc.log',
      out_file: 'out.log',
      env: {
        "NODE_ENV": "prod",
      },
      env_dev: {
        "NODE_ENV": "dev",
      },
      env_prod : {
         "NODE_ENV": "prod"
      },
      env_pre : {
        "NODE_ENV": "pre"
      },
      env_stable : {
        "NODE_ENV": "stable"
     }
    },
   ]
 }

그리고 시작할 때pm2start--envstable를 사용하여 어떤 환경을 사용할지 지정할 수 있습니다.나는 운행을 편리하게 하기 위해 습관적으로 기본 nv를 시작 생산 환경 설정으로 설정하지 않습니다.pm2start, 이 경우 env라는 대응 설정을 사용합니다.

작은 매듭

본고는 여기까지 소개했습니다. 환경 표지에 따라 환경 차이 변수를 사용자 정의하고 사용하는 방법을 잘 알고 이를 발굴하고 활용하시기 바랍니다.
Nuxt의 서로 다른 환경을 어떻게 구분하는지에 관한 이 글은 여기에 소개되었습니다. 더 많은 Nuxt의 서로 다른 환경 구분 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!