vue2配置不同环境打包指令（vue-cli3）

YJ_0518

已于 2024-01-16 10:37:32 修改

阅读量1k

点赞数 12

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-12-27 10:42:59 首次发布

本文链接：https://blog.csdn.net/weixin_45606890/article/details/135237484

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.根目录创建环境文件

命名规则：.env.环境名
文件内容可如下：

NODE_ENV =  dev  // 和文件名一致
VUE_APP_XX = XXX // VUE_APP为前缀，后面名称可自定义
VUE_APP_BASE_API = http://10.1.0.100:8000

假设需要配置四个环境，分别是本地、测试、灰度、正式，需要在根目录创建四个文件，分别是
.env.development 本地环境
.env.production_test 测试环境
.env.production_pre 灰度环境
.env.production 线上正式环境
（1）.env.development 本地环境

NODE_ENV = 'development'
VUE_APP_CURRENTMODE='development' 
# 接口地址
VUE_APP_BASE_API=''

（2）.env.production_test 测试环境

NODE_ENV = 'production_test'
VUE_APP_CURRENTMODE='production_test' 
# 接口地址
VUE_APP_BASE_API=''

（3）.env.production_pre 灰度环境

NODE_ENV = 'production_pre'
VUE_APP_CURRENTMODE='production_pre' 
# 接口地址
VUE_APP_BASE_API=''

（4）.env.production 线上正式环境

NODE_ENV = 'production'
VUE_APP_CURRENTMODE='production' 
# 接口地址
VUE_APP_BASE_API=''

2.配置打包指令

package.json 的scripts对象中增加--mode XX(XX为环境配置文件名，如上面的development、production_test、production)变为：

"scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build_test": "vue-cli-service build --mode production_test",
    "build_pre": "vue-cli-service build --mode production_pre",
    "build": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint"
},

获取配置文件内的信息可以通过获取process.env.NODE_ENV的值进行判断
打包时输入命名：

// 测试
npm run build_test
// 灰度
npm run build_pre
// 正式
npm run build

3.打包生成不同的dist文件夹

vue.config.js 给不同dist文件夹名称，增加配置：

const outputDir = process.env.NODE_ENV ? process.env.NODE_ENV + "_dist" : "dist"

module.exports = defineConfig({
     outputDir: outputDir,// 新增配置
     devServer: {}
})

使用示例：
项目的api文件夹下的baseUrl文件内容如下：
（1）可以直接使用环境配置文件内的接口地址

let BASE_URL = process.env.VUE_APP_BASE_API
export const baseUrl = BASE_URL

（2）如果除了配置接口地址，还需要配置其他信息，可以在baseUrl文件中进行自定义

let baseUrl = ''
let imgUrl = ''
if (process.env.NODE_ENV === 'development') {
  // 本地接口地址
  baseUrl = ''
  imgUrl = ''
} else if (process.env.NODE_ENV === 'production_test') {
  // 测试接口地址
  baseUrl = ''
  imgUrl = ''
} else if (process.env.NODE_ENV === 'production_pre') {
  // 灰度环境接口地址
  baseUrl = ''
  imgUrl = ''
} else if (process.env.NODE_ENV === 'production') {
  // 正式环境接口地址
  baseUrl = ''
  imgUrl = ''
}
export const BASEURL = baseUrl 
// import { BASEURL } from '@/api/baseUrl'
export const IMGURL = imgUrl