vue项目package.json配置

Jenkins配置环境变量与Vue项目环境切换

原创已于 2022-09-01 15:39:47 修改 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-19 20:21:12 首次发布

功能专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何配置Jenkins运行Vue项目的不同环境命令，如本地、测试和正式环境，通过.env文件和配置文件实现环境变量的区分。同时讲解了请求拦截器的设置，确保在不同环境下使用正确的API地址。最后展示了Jenkins中运行测试项目的正确命令。

场景：菜狗配置Jenkins运行测试项目命令‘npm run build’项目显示为正式环境
问题：运行命令配置错误导致项目环境错误
解决思路：根据不同的环境配置不同的运行脚本命令

本地：npm run serve
测试：npm run stage
正式：npm run build

配置环境（与src同级目录）
.env.development

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.production

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

.env.staging

NODE_ENV='staging'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

根据环境配置服务（在src目录下创建文件夹Config）
config/env.development.js

// 本地环境配置
module.exports = {
  title: 'saas',
  baseUrl: 'http://test.qubiankeji.com:18004', // 项目地址
  baseApi: 'http://test.qubiankeji.com:18004', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
  APPID: 'xxx',
  APPSECRET: 'xxx',
}

config/env.production.js

// 正式
module.exports = {
  title: 'saas',
  baseUrl: 'http://saas.XXXX.com:18004', // 正式项目地址
  baseApi: 'http://saas.XXXX.com:18004', // 正式api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
}

config/env.staging.js

module.exports = {
  title: 'saas',
  baseUrl: 'http://test.XXXX.com:18004', // 测试项目地址
  baseApi: 'http://test.XXXX.com:18004', // 测试api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx',
}

config/index.js

// 根据环境引入不同配置 process.env.VUE_APP_ENV
const environment = process.env.VUE_APP_ENV || 'development'
const config = require('./env.' + environment)

module.exports = config

请求拦截（根据不同环境配置不同服务接口）
src/utils/request.js


// 根据环境不同引入不同api地址
import { baseApi } from '../config'

const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 10000, // request timeout
});