最近在做一个vue项目,想通过不同的命令调用不同环境的api,防止来回手动修改api出错。网上看了好多写的都不全,然后自己突发奇想自己写一篇文章。
一、先简单说一下项目搭建
1、安装vue脚手架
npm install vue-cli -g
2、在硬盘上找一个文件夹放工程用的,在终端中进入该目录
cd 目录路径
3、根据模板创建项目
vue init webpack 项目名字<项目名字不能用中文>
4、安装依赖
cd 项目目录
npm install
二、安装完毕之后打开project.json文件,配置test(测试环境指令)
npm run dev 调用本地环境
npm run test 调用阿里测试环境api
npm run build 调用 生产环境ap
这是三种不同环境的指令
三、在build文件夹下建立test.js、webpack.test.conf.js文件
将build.js的内容全部制到test.js文件里,test.js完成
将webpack.prod.conf.js的内容复制到webpack.test.conf.js文件里
然后修改webpack.test.conf.js文件;
将const env = require('../config/prod.env');
修改为const env = require('../config/test.env');
webpack.test.conf.js完成
修改前:const webpackConfig = require('./webpack.prod.conf')
修改后:const webpackConfig = require('./webpack.test.conf')
四、在config文件下建立test.env.js文件
将prod.env.js内容全部复制到test.env.js文件里,
分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT,
五、在config文件夹下配置index.js
增加test配置项,把build配置项的内容全部复制过来即可
六、在main.js文件里配置baseURL
这样多配置一种环境,就能实现开发、测试、生产环境随便调用,再也不用手动去修改了。
标签:axios,conf,baseURL,js,webpack,vue,env,test From: https://www.cnblogs.com/valu/p/18415105