Vue多环境打包配置，根据命令生成不同打包文件名

Vue自定义配置打包生成文件名

前言：一套代码使用在两个或更多服务器，而每个服务器上前端文件夹名称各有不同，而打包后文件夹默认为dist，为减少打包后二次修改文件夹名称，故此配置

1.创建env配置文件

// .env.development文件

# dev环境
ENV = 'development'

# 打包文件名
VUE_APP_NAME = 'dev'

# 请求地址
VUE_APP_URL = 'http://210.12.388.169:8888/TEST'
1
2
3
4
5
6
7
8
9
10

// .env.production

# 生产环境
ENV = 'production'

# 打包文件名
VUE_APP_NAME = 'prod'

# 请求地址
VUE_APP_URL = 'http://113.83.87.73:8888/PROD'
1
2
3
4
5
6
7
8
9
10

2.使用env配置文件设置Axios的baseURL

// request.js进行axios的二次封装模块

import axios from 'axios';

const service = axios.create({
  // 获取在env配置文件中的 VUE_APP_URL
  baseURL：process.env.VUE_APP_URL
})

export default service
1
2
3
4
5
6
7
8
9
10

3.配置scripts脚本运行命令模式

在package.json文件下的scripts对象中配置mode

"scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve --mode development",
    "serve-prod": "vue-cli-service serve --mode production",
    "build": "vue-cli-service build --mode development",
    "build-prod": "vue-cli-service build --mode production",
  },
1
2
3
4
5
6
7

4.Vue.config.js设置打包文件名

// 引入path模块 必须
const path = require('path')
//是否测试环境
let isDev = true
// 打包文件名称
let fileName = 'dist'
// env配置文件中的 VUE_APP_NAME
if(process.env.VUE_APP_NAME == 'ZXSP'){
  isDev = false
}else if(process.env.VUE_APP_NAME == 'ZXSB'){
  isDev = false
}
// 兼容性，以防打包崩溃
fileName = process.env.VUE_APP_NAME || 'dist'
// 配置打包文件名
module.exports = {
    outputDir: fileName
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

5.运行命令启动服务/打包

-- 本地服务 -- 
如使用测试地址，则运行： npm run dev
如使用正式环境，则运行： npm run serve-prod

-- 打包命令 -- 
如使用测试地址，则运行： npm run build
如使用正式环境，则运行： npm run build-prod

若修改了env配置文件，则需要重新启动服务，或下载其余插件进行监听
1
2
3
4
5
6
7
8
9