vue-cli4多环境配置

原创于 2021-09-13 10:09:39 发布 · 777 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #小程序

前端专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了在Vue.js项目中如何配置不同环境（开发和生产）的环境变量，包括创建.env文件、配置package.json及vue.config.js，以及如何通过npm脚本切换和打包不同环境。重点讲解了如何设置API请求的基础URL以及使用代理解决跨域问题。

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

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