首页 > 其他分享 >vue项目之配置本地,测试,生产环境,配置axios.defaults.baseURL,解决跨域问题

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

时间:2024-09-15 11:47:27浏览次数:13  
标签:axios conf baseURL js webpack vue env test

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

相关文章