vue webpack 配置环境变量

在 Vue 中，可以通过 webpack 的 DefinePlugin 插件来配置环境变量。具体步骤如下：

1. 在 webpack 配置文件中引入 webpack 插件：

const webpack = require('webpack')

2. 在 plugins 中添加 DefinePlugin 插件，并定义环境变量：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
    }
  })
]

其中，NODE_ENV 是一个默认的环境变量，用于指定当前环境是开发环境还是生产环境。API_BASE_URL 是自定义的环境变量，用于指定 API 的基础 URL。

3. 在代码中使用环境变量：

console.log(process.env.NODE_ENV)
console.log(process.env.API_BASE_URL)

相关问题

vue webpack 环境变量

Vue webpack 环境变量可以通过使用cross-env插件来进行设置。在package.json文件中的scripts部分，可以使用cross-env命令设置环境变量，使其在不同操作系统下都能正常运行。例如，可以在build脚本中使用cross-env命令设置NODE_ENV为production，然后在webpack的配置文件中使用process.env来获取该环境变量的值。通过这种方式，我们可以根据不同的环境变量值来进行相应的配置。

具体操作如下所示：
1. 首先，在项目的根目录下运行npm install --save-dev cross-env命令来安装cross-env插件。
2. 在package.json文件中的scripts部分，将需要设置环境变量的命令前加上cross-env，然后通过键值对的形式设置具体的环境变量。例如，可以使用cross-env NODE_ENV=production来设置NODE_ENV为production。
3. 在webpack的配置文件中，可以通过process.env来获取设置的环境变量的值。例如，可以使用process.env.NODE_ENV来获取NODE_ENV的值。

示例代码如下所示：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

在webpack的配置文件中，可以通过引入环境变量的配置文件，然后使用webpack.DefinePlugin来将环境变量注入到代码中。例如，在build/webpack.prod.conf.js文件中的plugins部分添加如下代码：

const env = require('../config/prod.env');

var webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    ...
  ]
  ...
});

以上就是在Vue项目中使用webpack配置环境变量的方法。

vue2配置部署多环境变量

在Vue2中，可以通过配置不同的环境变量来实现在不同的环境中使用不同的配置。以下是一些配置多环境变量的步骤：

1. 在根目录下创建.env文件，分别创建.env.development、.env.test、.env.production等文件，用于存储对应环境的配置。

2. 在这些文件中配置对应的环境变量，例如：

// .env.development
NODE_ENV = 'development'
API_BASE_URL = 'http://localhost:3000'

// .env.test
NODE_ENV = 'test'
API_BASE_URL = 'http://test.api.com'

// .env.production
NODE_ENV = 'production'
API_BASE_URL = 'http://prod.api.com'

3. 在vue.config.js文件中，使用webpack的DefinePlugin插件将环境变量注入到Vue应用中。例如：

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
          API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
        }
      })
    ]
  }
}

4. 在Vue应用中，可以通过process.env访问环境变量的值。例如：

axios.defaults.baseURL = process.env.API_BASE_URL

这样，在不同的环境中，Vue应用会自动加载对应的环境变量配置，从而达到多环境部署的目的。