vue cli3创建测试打包环境（通过development、production、alpha指定不同的接口地址）...

最新推荐文章于 2025-03-24 11:47:05 发布

choujiaobm01735

最新推荐文章于 2025-03-24 11:47:05 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/kaikai1/blog/3066808

本文介绍如何在Vue项目中配置不同的环境变量，包括开发、测试和生产环境，通过修改.vue-cli-service、.env文件及vue.config.js实现不同环境的baseUrl设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考地址

前言：项目一般有开发环境，测试环境，生产环境；vue cli内置有开发和生产环境，可以用process.env.NODE_ENV区分，有时候我们和后台同事需要本地连接调试代码，又需要连接测试环境调试，发布的还有生产环境。关靠NODE_ENV无法区分3种baseUrl。下面加一种alpha环境变量，和production打包就productionSourceMap配置有区别，用于测试环境方便查看源码调试。

1、创建vue cli环境变量

在项目根目录创建文件 .env.build 编辑内容为

NODE_ENV      = 'production'
VUE_APP_BUILD = 'production'

在项目根目录创建文件 .env.alpha 编辑内容为

NODE_ENV      = 'production'
VUE_APP_BUILD = 'alpha'

两个文件NODE_ENV值都为production，以消除vue cli内部使用NODE_ENV变量导致打包出现差异

2、修改package.json启动模式

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode build",
    "alpha": "vue-cli-service build --mode alpha"
  }
}

build用户生产环境打包，alpha用于测试环境打包

3、修改vue.config.js配置

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  lintOnSave: process.env.NODE_ENV !== 'production',
  productionSourceMap: process.env.VUE_APP_BUILD !== 'production' // 生产环境去掉map文件
}

4、不同环境使用不同url

const dev = '/test'
const alp = 'http://192.168.1.31:8443/api'
const pro = 'http://111.111.111.111:8443/api'

export const baseURL = process.env.NODE_ENV === 'development' ? dev : process.env.VUE_APP_BUILD === 'production' ? pro : alp

通过process.env.VUE_APP_BUILD可以取到配置在.env.[mode]文件里面的值

注：mode在build环境下为.env.build文件下VUE_APP_BUILD配置的值

转载于:https://my.oschina.net/kaikai1/blog/3066808