Vue 개발 환경과 프로덕션 환경은 서로 다른 변수를 설정합니다.-프런트엔드 Q&A-php.cn

Vue 개발 환경과 프로덕션 환경은 서로 다른 변수를 설정합니다.

王林

풀어 주다： 2023-05-24 09:55:37

원래의

780명이 탐색했습니다.

Vue 개발에서는 다양한 환경에서 다양한 변수를 설정하는 것이 매우 일반적입니다. 예를 들어, 개발 환경에서는 일부 디버깅 도구를 켜야 할 수 있고, 프로덕션 환경에서는 애플리케이션 성능을 향상시키기 위해 이러한 디버깅 도구를 꺼야 할 수 있습니다. 이때 개발 환경과 프로덕션 환경에서 서로 다른 변수를 설정해야 합니다.

아래에서는 Vue에서 다양한 변수를 설정하는 방법을 소개하겠습니다.

Vue-Cli에서 설정

Vue-Cli는 애플리케이션을 개발하고 구축하는 데 필요한 모든 것이 내장된 Vue.js용 스캐폴딩 도구입니다. 따라서 Vue-Cli를 사용하여 애플리케이션을 개발하는 경우 구성 파일에서 변수를 설정할 수 있습니다.

먼저 프로젝트의 루트 디렉터리에 .env.라는 파일을 생성한 후 필요에 따라 마지막에 환경 변수 이름을 추가해야 합니다. 예를 들어 이 파일에 VUE_APP_TEST라는 환경 변수를 다음과 같이 추가했습니다. .env. 的文件，然后根据你的需要在后面添加环境变量的名称。例如，我们在该文件中添加了一个名为 VUE_APP_TEST 的环境变量，如下所示：

VUE_APP_TEST=hello world

로그인 후 복사

然后，在你需要使用该环境变量的组件中，你可以通过 process.env.VUE_APP_TEST 来获取该环境变量的值。

需要注意的是，在 Vue-Cli 中，所有以 VUE_APP_ 开头的变量都会被自动注入到应用程序中，并且只有在 NODE_ENV 变量设置为 development 或 production 时才能正常工作。

在 Webpack 中设置

如果你没有使用 Vue-Cli，而是使用了 Webpack 打包工具，则可以在 webpack.config.js 文件中设置环境变量。

首先，你需要引入 webpack.DefinePlugin，然后在该插件中设置环境变量，如下所示：

const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      TEST: JSON.stringify('hello world')
    })
  ]
}

로그인 후 복사

然后，在你需要使用该环境变量的组件中，你可以通过 process.env.TEST 来获取该环境变量的值。

需要注意的是，在 Webpack 中，你需要手动设置环境变量，并且需要在每个环境中都进行设置，因此相对比较麻烦。