vue项目配置env的方法步骤

Vue项目配置.env文件主要是为了在开发和生产阶段，动态地管理不同的环境变量。比如开发人员在开发阶段，需要连接到本地开发的服务器，而在生产环境下则需要连接到生产服务器。

下面是Vue项目配置.env的步骤：

1. 在项目根目录下，创建.env文件和.env.development文件和.env.production文件。

2. 在.env.development和.env.production中分别定义所需要的环境变量，如：

// .env.development文件中定义开发环境的环境变量
VUE_APP_BASE_API=http://localhost:8080

// .env.production文件中定义生产环境的环境变量
VUE_APP_BASE_API=http://www.example.com/api

注意：在定义变量名时必须以VUE_APP_开头，这是Vue CLI3默认处理的变量名。

1. 在Vue项目的代码中，可以通过process.env来获取定义的环境变量，如：

// 获取定义的环境变量
const BASE_API = process.env.VUE_APP_BASE_API;

其中BASE_API就是对应环境变量的值。

1. 在Vue项目的配置文件vue.config.js中，设置跨域和代理等相关配置，如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: `http://${process.env.VUE_APP_BASE_URL}`,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

1. 最后，通过npm start启动开发环境，或者通过npm run build来打包生成生产环境的代码。在启动时，根据环境变量的定义，会自动加载相应的环境变量。

示例1：定义自定义环境变量

在.env.development文件中定义自定义环境变量，如：

VUE_APP_API_KEY=123456

在Vue项目的代码中，可以通过process.env来获取定义的环境变量，如：

const API_KEY = process.env.VUE_APP_API_KEY;

示例2：定义不同的服务器地址

在.env.development和.env.production中分别定义不同的服务器地址，如：

// 开发环境的服务器地址
VUE_APP_BASE_URL=localhost:8080

// 生产环境的服务器地址
VUE_APP_BASE_URL=www.example.com

在Vue项目的配置文件vue.config.js中，可以通过代理来设置服务器地址，如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: `http://${process.env.VUE_APP_BASE_URL}`,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

以上就是Vue项目配置.env文件的详细步骤和示例。