vue2+webpack环境变量配置

最新推荐文章于 2025-11-06 10:04:23 发布

原创最新推荐文章于 2025-11-06 10:04:23 发布 · 721 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue.js #javascript

第一步：创建3个环境变量文件

在这里插入图片描述

1、创建> 生产（本地）环境 `.env.development`

# 开发环境
ENV='development'
VUE_APP_MEDIA_BASE='调后端请求的地址'

2、创建> 测试环境 `.env.staging`

# 测试环境
ENV='staging'
VUE_APP_MEDIA_BASE='调后端请求的地址'

3、创建> 生产（正式）环境 `.env.production`

# 正式环境
ENV='production'
VUE_APP_MEDIA_BASE='调后端请求的地址'

第二步：在`vue.config.js`文件中配置


module.exports = {
	//生产环境使用development的变量
  lintOnSave: process.env.ENV === 'development',
  //设置代理
   proxy: {
      '/api': {
        target: process.env.VUE_APP_MEDIA_BASE,
        changeOrigin: true,
      }
    }
}

第三步：配置`package.json`

//正式环境build指令build:prod
//测试环境build指令build:stage
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    }