vue项目之配置本地，测试，生产环境，配置axios.defaults.baseURL，解决跨域问题

- 日理万妓 2024-04-07 11:53 84阅读 0赞

##  ##

最近在做一个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

这是三种不同环境的指令

![b9b44db3a4d74ed8bb621b54df8b3475.png][]

**三、在build文件夹下建立test.js、webpack.test.conf.js文件**

将build.js的内容全部制到test.js文件里，test.js完成

![d695beb395d3454cbd8923c7afc54f2e.png][]

将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文件

![6a9034b7ce02452bb3d950977380b8c5.png][]

将prod.env.js内容全部复制到test.env.js文件里，  
分别在dev.env.js,test.env.js,prod.env.js中定义变量API\_ROOT，

![470b6f5463e64200a62f8dd6b5f93918.png][]

![75bf018866bf46879dc0af819f1beef4.png][]

![488e02a157f64a67b50f8538a74a7cea.png][]

![ec1a450430f54940af2040ac9452b4db.png][]

五、在config文件夹下配置index.js

![8b8b6483e4a54dceb8569f1641baf085.png][]

增加test配置项，把build配置项的内容全部复制过来即可

六、在main.js文件里配置baseURL

![5199dfbb51944d29a327b39450a642ca.png][]

这样多配置一种环境，就能实现开发、测试、生产环境随便调用，再也不用手动去修改了

[b9b44db3a4d74ed8bb621b54df8b3475.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/b8189c3bf1164019a1537c1440de51df.png
[d695beb395d3454cbd8923c7afc54f2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/4b29c412cd1d490c90dbfdda44e989a5.png
[6a9034b7ce02452bb3d950977380b8c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6240b5acf6f6497f81ba877c3320305a.png
[470b6f5463e64200a62f8dd6b5f93918.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8f8812e92edc44ebb0bc084bedeef6ad.png
[75bf018866bf46879dc0af819f1beef4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/02f268ae1da64224a96f29eccaefb173.png
[488e02a157f64a67b50f8538a74a7cea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/19b2d127dc504ec6b6a8015992c49fbc.png
[ec1a450430f54940af2040ac9452b4db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3d88bdeb66454326b582e146dd3d476f.png
[8b8b6483e4a54dceb8569f1641baf085.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/c6dd3ba00d224986af301bd607174c2f.png
[5199dfbb51944d29a327b39450a642ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5433fc7b54c84da9bf8ac6b23f697e38.png