nuxt.js 환경 변 수 를 추가 하고 프로젝트 포장 환경 을 구분 합 니 다.

최근 업무 수요 로 nuxt.js 프로젝트 를 개 발 했 습 니 다.
포장 환경 변 수 를 설정 할 때 nuxt.js 의 문서 가 너무 간단 해서 참조 할 수 없습니다.
몇 가지 자 료 를 조사 한 후에 이 문 제 를 해결 했다.마침내 문서 로 정리 하여 여기에 발표 하여 동업자 에 게 참고 하도록 하 였 다.
1.cross-env 플러그 인 추가
npm
npm i cross-env
yarn
yarn add cross-env
환경 변수 파일 추가
루트 디 렉 터 리 env.production 추가
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
루트 디 렉 터 리 에 env.test 파일 추가
NODE_ENV = 'production'
VUE_APP_TITLE = 'test'
3.전역 환경 변수 주입
nuxt.config.js 에 환경 변수 설정 추가

export default {
 env: {
   VUE_APP_TITLE: process.env.VUE_APP_TITLE
 }
}

4.포장 명령 수정
package.json 에서 다음 명령 을 수정 합 니 다.

"scripts": {
  "dev": "nuxt",
  "build": "cross-env process.env.VUE_APP_TITLE=production nuxt build",
  "build:test": "cross-env process.env.VUE_APP_TITLE=test nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate",
  "test": "jest"
 }

Yrn build 를 실행 하여 생산 환경 패키지,Yrn build:test 테스트 환경 패키지.
보충 지식:vue 프로젝트 환경 포장 의 구체 적 인 절차-테스트 환경 과 온라인 환경 을 구분 하 는 포장 참조 경로
STEP 1:cross-env 설치
npm install --save-dev cross-env
크로스 플랫폼 설정 과 환경 변 수 를 사용 하 는 스 크 립 트 를 실행 합 니 다.
STEP 2:package.json 수정
패키지
패키지 명령 설정-vue-cli 를 사용 하여 만 든 프로젝트 를 기반 으로 하고 프로필 은 NODE 를 기반 으로 합 니 다.ENV=production 에서 처리 합 니 다.기 존 프로필 을 최소 화 하 는 원칙 에 따라 저 희 는 여기 있 습 니 다.NODEENV 는 모두 production 으로 설정 하 는 것 이 좋 습 니 다.
EVN 1 개 추가CONFIG 필드 에서 환경 구분 하기
NODE_ENV=production EVN_CONFIG=dev 대응
process.env.EVN_CONFIG(package.json 의 EVNCONFIG)는 config/index.js 의 build 환경 값 과 대응 합 니 다.
package.json 파일 의 scripts 내용 을 개성 있 게 하고 새로 정 의 된 몇 가지 환경의 포장 과정 을 추가 합 니 다.안의 매개 변 수 는 앞의 조정 과 일치 합 니 다.
"build:dev": "cross-env NODE_ENV=production EVN_CONFIG=dev node build/build.js",
"build:test": "cross-env NODE_ENV=production EVN_CONFIG=testing node build/build.js",
"build:prod": "cross-env NODE_ENV=production EVN_CONFIG=production node build/build.js" 　　

STEP 3:config/index.js 수정
config/index.js 파일 에서 build 인 자 를 수정 합 니 다.이 인 자 는 build/webpackage.prod.conf.js 에서 사 용 됩 니 다.

4 단계 build/webpackage.prod.conf.js 수정

env ------ process.env.EVN_CONFIG 는 config/index.js 의 build 환경 값 과 대응 하 는 관계 가 있 습 니 다.

true
testing<br><br>console.log(env) ----
{ NODE_ENV: '"production"', EVN_CONFIG: '"testing"' }

테스트 환경 과 온라인 환경 을 구분 하기 위 한 패키지 참조 경로

index:템 플 릿
assetRoot:압축 된 파일 을 저장 할 경로
assets SubDirectory:index.html 를 제외 한 정적 자원 이 저장 할 경로,
assets PublicPath:대표 포장 후 index.html 에서 자원 의 상대 주 소 를 참조 합 니 다.

build: {
  //   test dev prod        
  production: require('./prod.env'),
  dev: require('./dev.env'),
  testing: require('./test.env'),
  // Template for index.html
  index: path.resolve(__dirname, '../dist/index.html'),
 
  // Paths
  assetsRoot: path.resolve(__dirname, '../dist'),
  // assetsRoot: process.env.EVN_CONFIG === 'testing'?'../dist':'../h5',
  // assetsSubDirectory: './static',
  // assetsPublicPath: '/h5/',
  assetsSubDirectory:process.env.EVN_CONFIG === 'testing' ? './static':'static',
  assetsPublicPath:process.env.EVN_CONFIG === 'testing' ? '/h5/':'/',

이상 의 이 nuxt.js 는 환경 변 수 를 추가 하고 프로젝트 포장 환경 을 구분 하 는 작업 은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.