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

[忧郁xiao流氓]

最近在做一个vue项目，想通过不同的命令调用不同环境的api，防止来回手动修改api出错。网上看了好多写的都不全，然后自己突发奇想自己写一篇文章。

一、先简单说一下项目搭建

1、安装vue脚手架

npm install vue-cli -g

2、在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

3、根据模板创建项目

vue init webpack 项目名字<项目名字不能用中文>

4、后面就是根据自己的喜好配置，最后一个是否保存自己的喜好设置，我一般不保存，每次根据情况自己去配置

5、安装依赖

cd 项目目录
npm install

二、安装完毕之后打开project.json文件，配置test（测试环境指令）

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

这是三种不同环境的指令



三、在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完成

四、在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



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

[忧郁xiao流氓]

补充一下： 第三步、将build.js的内容全部复制到test.js文件里之后需要对里边的内容修改一下 修改前：const webpackConfig = require('./webpack.prod.conf') 修改后：const webpackConfig = require('./webpack.test.conf') 第五步、作用是打包一个区别于“dist”文件夹的另一个文件夹，如果没有需要的话可以省略

[等等_5836]

解决跨域问题有说明吗

[忧郁xiao流氓]

引用 2 楼 等等_5836 的回复：

解决跨域问题有说明吗

什么说明

[Anliny]

这样配置了 跨域通不过

[淘人居士]

感觉把问题复杂化了，如果只是想要不同环境下使用不同的API地址以及其它变量，官方教程有说明怎么弄 步骤1：在项目根目录创建文件 .env --所有环境生效 .env.development --开发环境优先生效 .env.test --测试环境优先生效 步骤2: 这3个文件分都写入环境变量，例如API地址 .env --内容:VUE_APP_BASEAPI=api/ .env.development --内容:VUE_APP_BASEAPI=http://localhost:5500/api/ .env.test --内容:VUE_APP_BASEAPI=http://测试服务器:5500/api/ 步骤3：在需要用到的地方使用环境变量 例如给axios组件设置全局api地址 axios.defaults.baseURL = process.env.VUE_APP_BASEAPI; 官网教程 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

[忧郁xiao流氓]

报什么错？后台配置了没