vue项目根据不同的环境配置不同的接口地址

最新推荐文章于 2024-08-04 02:06:26 发布

蜉蝣&一粟

最新推荐文章于 2024-08-04 02:06:26 发布

阅读量4.8k

点赞数

分类专栏： vue axios

本文链接：https://blog.csdn.net/RJN0814/article/details/95349724

版权

在Vue开发中，为适应不同环境（如本地、测试、生产），需配置不同接口地址。通过修改dev.env.js和prod.env.js设置API路径，并在service.js中调用。启动项目时，使用npm run dev命令结合--dev、--test或--pro参数来选择环境。例如，本地开发使用npm run dev，测试环境为npm run dev --test，生产环境则为npm run dev --pro。记得在打包时同样指定环境参数，避免使用cnpm run dev命令。

摘要由CSDN通过智能技术生成

在我们开发的过程中，会根据不同的环境使用不同的接口地址，这时候就需要我们自己根据不同的环境配置不同的接口地址了。相关配置主要在config文件夹下的dev.env.js和prod.env.js两个文件，下面废话不多说直接上代码了。

dev.env.js文件中的代码如下

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

let DEFAULT_ENV_CONFIG = 'dev';
if (prodEnv.USE_DEFAULT_ENV_CONFIG) {
  //设置为默认值
  prodEnv.ACTIVE_ENV_CONFIG = '"' + DEFAULT_ENV_CONFIG + '"';
}

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
});

prod.env.js文件中的代码如下

'use strict'

let USE_DEFAULT_ENV_CONFIG = true;
let DEFAULT_ENV_CONFIG = 'pro';
let ACTIVE_ENV_CONFIG;
let allowed_envs = ['dev', 'test', 'pro'];

let npm_config_argv = process.env.npm_config_argv;
if (npm_config_argv) {
  //解析使用参数所激活的环境参数,存在时取消默认使用的环境
  let npm_config_a