vue-cli 环境变量 process.env的使用及说明

在Vue.js项目中，我们可以通过使用process.env来访问环境变量，这在不同的环境下可以用来指定不同的参数或配置。本文将详细讲解如何使用process.env来设置和访问环境变量。

process.env的基本用法

process.env是Node.js中的全局变量，可以用来访问系统环境变量。在Vue.js项目中，我们可以通过在命令行中设置环境变量来指定不同的配置，如下：

$ NODE_ENV=production npm run build

在代码中使用process.env来获取NODE_ENV变量的值：

if (process.env.NODE_ENV === 'production') {
  console.log('production mode')
}

在vue.config.js中使用process.env

在Vue.js项目中，我们可以通过vue.config.js文件来配置如何构建项目，其中可以使用process.env来指定不同的参数。例如：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

在上面的配置中，我们根据NODE_ENV的值来设置publicPath参数。如果NODE_ENV为production，则将publicPath设置为'/production-sub-path/'，否则设置为'/'。

在代码中使用process.env

在Vue.js项目中，我们也可以在代码中使用process.env来访问环境变量。例如：

axios.get(`${process.env.VUE_APP_API_BASE}/users`)
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中，我们使用VUE_APP_API_BASE来访问API的基础路径。在开发环境和生产环境中，我们可以分别将VUE_APP_API_BASE设置为不同的值。

示例1：在开发环境与生产环境下使用不同的API接口地址

在Vue.js项目中，我们可以使用process.env来访问环境变量，在示例中我们将使用process.env来实现在开发环境和生产环境中使用不同的API接口地址。

在vue.config.js文件中配置如下：

const apiBaseUrl = process.env.VUE_APP_API_BASE || 'http://localhost:3000'

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: apiBaseUrl,
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

在上面的配置中，我们通过访问VUE_APP_API_BASE环境变量来获取API接口地址。如果VUE_APP_API_BASE未设置，则使用默认值'http://localhost:3000'。

在代码中访问API接口可以这样写：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中，我们访问了'/api/users'路径，实际上访问的是通过代理转发到apiBaseUrl的'http://localhost:3000/users'路径。在开发环境中，我们可以设置VUE_APP_API_BASE为'http://localhost:3001'，从而访问'http://localhost:3001/users'路径。

示例2：在APP中使用API Token

在Vue.js项目中我们可以使用process.env来存储API Token值，并在代码中使用它来访问API接口。

在环境变量中设置API Token：

$ export VUE_APP_API_TOKEN='MyAPIToken'

在代码中访问API接口：

axios.get('/api/users', {
    headers: {
        'Authorization': process.env.VUE_APP_API_TOKEN
    }
})
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

在上面的代码中我们将process.env.VUE_APP_API_TOKEN的值设置为Authorization头，这样我们可以在访问API接口时携带API Token，从而实现权限控制。