vue-cli3实现分环境打包步骤（给不同的环境配置相对应的打包命令）

最新推荐文章于 2025-10-26 23:34:57 发布

转载最新推荐文章于 2025-10-26 23:34:57 发布 · 786 阅读

CC 4.0 BY-SA版权

原文链接：https://zhuanlan.zhihu.com/p/62298966?utm_source=wechat_session&utm_medium=social&utm_oi=1096171692325548032&utm_campaign=shareopn

文章标签：

#vue.js

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何通过设置不同环境变量，如NODE_ENV和VUE_APP_TITLE，实现在Vue项目中根据环境自动调整请求域名。通过package.json配置打包命令，配合环境特定的.env文件，简化了部署流程，确保在开发、测试和生产环境下API接口的不同配置。

只需要三个步骤即可实现根据环境不同而自动改变请求域名的需求，不需手动更改

通过改变process.env.NODE_ENV值区分打包环境，但是webpack打包时针对process.env.NODE_ENV===‘production’和其他情况打出来的包结构和大小都不一样；为了消除这种差异，可以使用其他变量比如process.env.VUE_APP_TITLE来区分环境

1. package.json中打包命令：

{
  "scripts": {
    "serve": "vue-cli-service serve", //本地运行，会把process.env.NODE_ENV设置为‘development‘
    "alpha": "vue-cli-service build --mode alpha",//设置第二部的文件之后运行此命令会把process.env.NODE_ENV设置为‘production‘
    "build": "vue-cli-service build --mode build"//设置第二部的文件之后运行此命令会把process.env.NODE_ENV设置为‘production‘
  },
}

2. 在项目根目录添加文件“.env.alpha”和“.env.build”，其内容分别为：

NODE_ENV = 'production'
VUE_APP_TITLE = 'alpha'

NODE_ENV = 'production'
VUE_APP_TITLE = 'production'

3. 区分环境：一般在request文件里面配置ajax的地方

//区分环境的变量
var env = process.env.NODE_ENV === 'development' ? 'development' :
    process.env.VUE_APP_TITLE === 'alpha' ? 'alpha' : 'production';
//根据不同环境配置接口请求地址 
if(env==="development"){
  axios.defaults.baseURL = "本地环境域名"
}else if(env==="alpha"){
  axios.defaults.baseURL = "测试环境域名"
}else if(env==="production"){
  axios.defaults.baseURL = "上线环境域名"
}