Vue自定义配置打包生成文件名
前言：一套代码使用在两个或更多服务器，而每个服务器上前端文件夹名称各有不同，而打包后文件夹默认为dist，为减少打包后二次修改文件夹名称，故此配置
1.创建env配置文件
// .env.development文件# dev环境ENV = 'development'# 打包文件名VUE_APP_NAME = 'dev'# 请求地址VUE_APP_URL = 'http://210.12.388.169:8888/TEST'
// .env.production# 生产环境ENV = 'production'# 打包文件名VUE_APP_NAME = 'prod'# 请求地址VUE_APP_URL = 'http://113.83.87.73:8888/PROD'
2.使用env配置文件设置Axios的baseURL
// request.js进行axios的二次封装模块import axios from 'axios';const service = axios.create({// 获取在env配置文件中的 VUE_APP_URLbaseURL：process.env.VUE_APP_URL})export default service
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",},
4.Vue.config.js设置打包文件名
// 引入path模块 必须const path = require('path')//是否测试环境let isDev = true// 打包文件名称let fileName = 'dist'// env配置文件中的 VUE_APP_NAMEif(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}
5.运行命令启动服务/打包
-- 本地服务 -- 如使用测试地址，则运行： npm run dev如使用正式环境，则运行： npm run serve-prod-- 打包命令 -- 如使用测试地址，则运行： npm run build如使用正式环境，则运行： npm run build-prod若修改了env配置文件，则需要重新启动服务，或下载其余插件进行监听
如果觉得《Vue多环境打包配置 根据命令生成不同打包文件名》对你有帮助，请点赞、收藏，并留下你的观点哦！
