最近在做vue项目,想实现通过不同的命令,调用不同环境的api,防止来回切换不同的api出错。

例如: npm run dev 调用本地环境
npm run test 调用阿里测试环境api
npm run build 调用 生产环境api

先简单说一下创建vue项目的流程:

1. npm install -g vue-cli 全局安装脚手架(只安装一次)
2. vue init webpack 项目名称(创建项目)
3. npm install (安装依赖)
4. npm run dev (本地启动项目)

项目是用vue-cli脚手架生成的,生成后项目中就有下面这两个文件


在build文件下新建webpack.test.conf.js,将webpack.prod.conf.js内容复制过来。
然后修改webpack.test.conf.js文件
将const env = require('../config/prod.env');
修改为const env = require('../config/test.env');

在config文件下新建test.env.js,将prod.env.js内容复制过来;
分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT,
dev.env.js

test.env.js

prod.env.js

project.json 中修改

上面中api只是示例,大家根据自己实际api进行配置。

配置API接口地址就可以直接用 process.env.API_ROOT,不用来回切换了。

Logo

前往低代码交流专区

更多推荐