Vue-cli 3 환경 변수 모두 정의되지 않음

Vue-cli 3 환경 변수 모두 정의되지 않음

나는 모든 해결책을 시도해 보았지만 나에게 맞는 해결책은 하나도 없는 것 같다.단지 몇 가지 값을 에 저장하고자 한다..env내 Vue 앱에 파일을 저장하지만 단순히 로그 기록하려고 함process.env구성 요소 내에서 빈 객체를 반환한다.

나의.env파일

VUE_APP_URL={api url}
VUE_APP_TOKEN={token}

내 계획은 이러한 환경 변수를 데이터 속성으로 설정하는 것이었지만 항상 반환됨undefined만약 내가 한다면console.log(process.env.NODE_ENV), 만약 내가 webpack.config.jso와 같은 했다면, 그것은 내가 본다고 하는 것이다. 그러나 만약 내가 같은 구성 요소 내에서 같은 것을 시도한다면

mounted() {
    this.$nextTick(() => {
      console.log(process.env.VUE_APP_URL);
    })
  }

그냥 돌아온다.undefined.

이곳에 도착하는 사람들을 위한 몇 가지 조언:

1. 반드시.env파일이 프로젝트 루트 폴더에 있음(단순한 용어가 아님)src/)
2. 변수 이름은 다음으로 시작해야 한다. VUE_APP_클라이언트 번들에 정적으로 포함되어야 하는 경우
3. 개발 서버를 재시작하거나 프로젝트를 빌드하여 변경 내용 적용
4. 웹 팩 기반 솔루션에서 마이그레이션하는 경우 교체하십시오.: 와 (JSON 구서서서서서)=(dotenv 형식).놓치기 쉬운
5. 변경 내용을 저장했는지 확인하십시오..env파일들
6. 이전 Vue 버전에서는 예를 들어 환경 변수가 정의되었다.config/dev.env.js .env루트 파일

난 알아냈다 - 난 설치해야만 했다dotenv-webpackwebpack.config.js로 초기화하는 것이 이상한데, 이는 문서 중 내가 그렇게 할 필요가 없다고 명시되어 있지 않기 때문이다.

설치dotenv-webpack그리고 구성:vue.config.js다음과 같이 정리하다

npm install dotenv-webpack --save-dev

구성 파일에 추가:

const Dotenv = require('dotenv-webpack');


module.exports = {
  configureWebpack: {
    plugins: [
      new Dotenv()
    ]
  }
}

당신 안에.env파일 추가 확인VUE_APP_변수 앞에 다음과 같이 표시하십시오.

VUE_APP_VAR1=example
VUE_APP_VAR2=value

이제 Vue 애플리케이션에서 다음 변수에 액세스하십시오.

console.log(process.env.VUE_APP_VAR1); // "example"
console.log(process.env.VUE_APP_VAR2); // "value"

참조할 수 있는 몇 가지 링크:

• https://www.npmjs.com/package/dotenv-webpack
• https://cli.vuejs.org/guide/webpack.html
• https://cli.vuejs.org/guide/mode-and-env.html#environment-variables

그래서 나는 VUE_APP_를 사용한다.API_URL(이 작업은 작동하지 않음)을 선택한 후 VUE_APP_APPIURL로 변경(이 작업)

그것이 도움이 되기를 바라다.

vue-cliverion이 3.x보다 높고 .env 파일을 코멘트처럼 루트 디렉터리에 넣는 경우.구성 요소에서 환경 변수에 액세스할 수 있음(예:process.env.VUE_APP_YOUR_VARIABLE). vue-cli 문서에 언급된 바와 같이.

수정이 가능하다.VUE_APP_클라이언트 번들에 정적으로 포함되며webpack.DefinePlugin응용 프로그램 코드에서 액세스할 수 있음:console.log(process.env.VUE_APP_SECRET)

루트 디렉터리에 .env 파일을 넣고 각 변수를VUE_APP_.

예를 들어 사용할 변수가 다음과 같은 경우 이를 시연하기 위해API_BASE_URL

당신 안에.env파일, 변수를 다음과 같이 입력하십시오.VUE_APP_API_BASE_URL=baseurl/api/v1

파일에서 액세스하려면process.env.VUE_APP_API_BASE_URL.

주의 사항:

다른 사람이 보지 않았으면 하는 민감한 정보를 당신의 프런트 엔드에 절대 넣지 마십시오.(웹 개발과 관련하여) 다른 사람이 보지 않았으면 하는 가장 일반적인 것은 API Key이다.이것을 하는 데는 진정한 결과가 있다.이것은 API 키를 대중에게 노출시키면서 화상을 입은 사람의 그런 예 중 하나이다.

단, 중요한 데이터를 a에 넣어도.env파일링 및 추가.env에 제출하다..gitignore파일(Git 저장소 호스팅 서비스(예: Gitub, BitBucket, Gitlab 등)에 밀어 넣지 않음) 데이터는 여전히 프런트엔드에서 안전하지 않다.백엔드 코드로 해야 안전하다. 서버에서 호스트될 것이기 때문이다.

프런트엔드에서 충분히 결심한 사람은 누구나 당신의 민감한 정보를 찾을 수 있다.당신의 모든 정보는 브라우저에서 이용할 수 있고, 그 사람이 해야 할 일은 단지 그 정보를 열기만 하면 된다.dev tools그리고 점검하다Sourcestab, 그리고 BOOM 당신의 모든 중요한 정보가 공개된다.

프런트엔드의 환경변수는 위의 예에서 보는 바와 같이 BASE URL과 같은 NIN-Sensitive 정보에 대한 하나의 참조점을 원할 때만 유용하다.BASE URL은 개발 과정에서 변경될 수 있으며 응용프로그램 폴더의 모든 참조를 수동으로 변경하지 않으려는 경우그것은 지루하고 몇몇을 놓칠 수도 있고, 그것은 오류로 이어질 수도 있다.

API 키 및 기타 중요한 정보가 프런트 엔드에 노출되지 않도록 하려면 이 문서를 참조하십시오.

에에 CLIdotenv용법은 다음 사항을 제공할 수 없다..env앞에 붙은 변수 이외의 변수VUE_APP_이것은 괜찮지만 다른 환경에 대한 (때로는 거대한) 변수들의 목록을 편리하고 안전하게 관리하고자 하는 아주 작은 웹 프로젝트도 만족시키기에 충분하지 않다.

기기를 ..env만큼의 변수에 대한 변수도 있다.dotenv.

이 솔루션을 사용하여 귀하가 원하는 정보에 액세스할 수 있음MY_EXTERNAL_API_KEY당신의.env[.environment]이렇게 당신의 코드를 철하다.const key = process.env.MY_EXTERNAL_API_KEY.

그것은 다음을 제공한다.

1. 다음과 같은 방법으로 미접속 사용의 편리성VUE_APP_변수의 이름 및 사용.env가변 확장 기능(사용)${VARNAME}변수의 종류)
2. 한 당신의 할 수 .console.log(pocess.env.MYVAR)런타임에 구축된 애플리케이션의 JS 번들 내에서 텍스트 검색을 통해 탐색할 수 있는 것도 아니다.
3. 원래의 Vue CLI 솔루션을 함께 사용할 수 있으며,

이를 위해dotenv-webpack에 포함시키다vue.config.js아래와 같이

const Dotenv = require('dotenv-webpack');

const envPath = function() {
    return (!process.env.NODE_ENV || (process.env.NODE_ENV === 'development')) ?
        './.env' :
        `./.env.${process.env.NODE_ENV}`;
}

const dotenvArgs = {
    expand: true,
    path: envPath()
};

module.exports = {
   //... some other config here
    configureWebpack: {
        plugins: [
            new Dotenv(dotenvArgs)
        ]
    }
};

여기:

• expand: true을 허용하다.${MYVAR}계량형 팽창
• path: envPath()사용자 정의 허용.envVue CLI 프로젝트 환경에 따른 파일 이름 및 프로젝트 구조에 따른 경로

다른 유용한 것들이 있다.dotenv-webpack 사용할 수 있는 옵션.

나는 이 솔루션이 가장 빈번한 사용 사례를 충분히 만족시킬 수 있을 만큼 좋다고 생각한다.

NB를 할 때 하십시오..env프런트 엔드(예: 외부 API 호출 시 API 키)에서 HTTP 요청으로, 검색 위치를 알고 있는 모든 사용자가 볼 수 있다.이 상황에 대한 보안 위험을 줄이기 위해 다양한 해결책이 있다.

다음 중 하나를 암시하기 위해:

• 응용프로그램을 통해 공개 데이터만 제공
• 또는 일부 인증 서비스(로그인/암호 + JWT|세션, 외부 인증 공급자 등)를 통해 응용 프로그램(또는 그 일부)을 인증하십시오.Facebook, Google 등;
• 또는 서버 생성 애플리케이션에 의존한다.

그러나 이것은 완전히 별개의 주제다.

이것은 나에게 효과가 있었다.이전에 VS Code에서 Proposer를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 추가하여 루트 폴더에 .env.development 및 .env.production 파일을 만들었었습니다.이것 때문에 나는 계속 분명하지 않았다.

파일을 삭제하고 처음 설치했다.npm install touch-cli -g 후 touch .env.production그리고touch .env.production그리고 그것은 동작한다.그래서 나는 이 Environ 파일들이 생성되는 방식에는 차이가 있다고 생각한다.

참고: 나는 웹 팩을 설치하지 않았다.vue cli를 사용하여 빌드만 수행

VS 코드 탐색기크롬 개발 도구

만약 했을 때 당신은 VUE-cli-2에서 VUE-cli-2를 수 ..env파일, 이 기사는 당신이 당신의 설정을 위해 무엇을 해야 하는지를 설명한다..env 환경데이에 입니다.config/dev.env.js이것은 Vue-cli-2 파에 해에는)

여기 또한 Vue-cli-3 .env 관련 문제에 대한 솔루션과 자세한 설명이 있다.

Linux에서는 Windows에서 작동해도 않으므로 .env 파일이 소문자로 되어 있는지 확인하십시오 작동하지.

여기에 제공된 대답이 도움이 되었다.나는 Laravel을 Vue 2.x의 이상한 세팅과 함께 사용하고 있다.이 프로젝트는 또한 Laravel Mix를 사용하고 있다.해결책은 다음과 같다.

패키지의 형제인 .env 파일 내부.json:

MY_ENVIRONMENT_VARIABLE=my_value

webpack.mix.js 내부:

const { mix } = require('laravel-mix');

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.EnvironmentPlugin (
                ['MY_ENVIRONMENT_VARIABLE']
            )
        ]
    };
});

후에,그 다음에.npm run dev또는npx mix이 변수들을 사용할 수 있어야 한다.

크레디트: 토르스텐 룬보그

나에게 효과가 있었던 것은 로부터의 변화였다..env로.env.local.왜 그런지 조사해보지는 않았지만, 오래된 프로젝트를 확인해보니,.env.local대신 이 프로젝트에서 값을 선택하지 않는 동일한 작업을 수행했다..env의사에 바의 없이.VUE_APP그리고 그것은 성공하였다.

참조URL: https://stackoverflow.com/questions/55510326/vue-cli-3-environment-variables-all-undefined