vue-cli4多环境配置

在开发过程中，工程的生产环境和开发环境配置不同，因此需要不同的配置。

1 创建文件

在工程根目录下（与vue.config.js同一目录），分别创建’.env‘、’.env.prod‘、’.env.dev‘文件。

’.env‘：文件中的变量，生产环境和开发环境都会加载，根据实际需要可以不要，我的环境仅仅配置了’.env.prod‘、’.env.dev‘两个文件；

’.env.prod‘：文件中的变量，生产环境加载；

’.env.dev‘：文件中的变量，开发环境加载；

2 配置文件

2.1 ’.env‘配置

可以根据自己实际开发的情况，不配置或者删除。

# 注意，所有环境都会加载
​
# 设置环境
# NODE_ENV='production'
​
# 设置前缀
# VUE_APP_BASE_API='./'
​
# 设置输出目录
# OUTPUT_DIR='dist'

2.2 ’.env.prod‘配置

# 只有使用生产环境时才加载
​
# 设置生产环境
NODE_ENV='production'
​
# 设置输出目录
OUTPUT_DIR='dist'
​
# 注意前缀只能是'VUE_APP_'
VUE_APP_BASE_API='./'
​
# 配置IP地址
VUE_APP_IP='192.168.101.10'

2.3 ’.env.dev‘配置

# 只有使用开发环境时才加载
​
# 设置开发环境
NODE_ENV='development'
​
# 设置打包输出的目录
OUTPUT_DIR='dist_dev'
​
# 注意前缀只能是'VUE_APP_'
VUE_APP_BASE_API='./'
​
# 配置IP地址
VUE_APP_IP='127.0.0.1'

2.4 ‘package.json’配置

// 可以根据实际的情况更改配置环境
"scripts": {
    // 配置环境
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    
    // 配置生成环境
    "serve:prod": "vue-cli-service serve --mode prod",
    "build:prod": "vue-cli-service build --mode prod",
​
    // 配置开发环境
    "serve:dev": "vue-cli-service serve --mode dev",
    "build:dev": "vue-cli-service build --mode dev",
     
    "lint": "vue-cli-service lint"
}

2.5 ’vue.config.js‘配置

// 从‘.env.XX’配置文件中获得的IP地址变量
let ip = process.env.VUE_APP_IP;
​
module.exports = {
    
    publicPath:'./',
​
    // 配置代理
    devServer:{
        proxy:{
            // 实际拼接为‘'http://ip/api’
            '/api':{
                target:'http://'+ip,
                changeOrigin: true,
​
                // 下面参数可以根据实际情况配置，无特殊需求可以不配置
                // 配置websockets
                // ws: true
                
                // 配置重定向，将请求路径中前缀‘/api’替换为‘’
                // pathRewrite:{
                //    '^/api':''
                // }
            }
        }
    }
}

2.6 ‘axios’请求数据

// 下面的请求地址为
// 开发环境时：http://127.0.0.1/api/login
// 生产环境时：http://192.168.2.10/api/login
axios.post("/api/login", param).then(res => {
    console.log(res.data);
});

3 使用配置的环境

# 启动开发环境服务
npm run serve
# 或者
npm run serve:dev
# 打包开发环境
npm run bulid:dev
​
​
# 启动生产环境服务
npm run serve:prod
# 打包生产环境
npm run bulid
# 或者
npm run bulid:prod