vuecli安装axios（Vue项目中安装使用axios全过程）
导读：Vue安装使用axios 一、安装...
Vue安装使用axios
一、安装
在控制台输入npm install axios -S
二、引入
在文件main.js中写入
import axios from axios;
Vue.prototype.$axios = axios;
三、使用
向cgi-bin/login.cgi提交登录data数据。
注意：
提交的Content-Type要看后端以什么方式接收，然后以相应的方式提交，要不然后端收到的就是被转码的乱码。 data的格式按自己要求修改。
//cgi-bin/login.cgi是提交登录的地址
const qs = require("qs");
const data = {
operate: "login",
psw: this.form.password,
};
//默认提交方式为Content-Type: application/x-www-form-urlencoded
this.$axios
.post(/cgi-bin/login.cgi,
qs.stringify({
data: JSON.stringify(data),
}),
)
//修改为Content-Type: application/json;charset=UTF-8方式：
//this.$axios
//.post(
// "/cgi-bin/login.cgi",
// // qs.stringify({
// data,
// // }),
// {
// headers: {
// "Content-Type": "application/json;charset=UTF-8",
// },
// }
// )
.then((result) => {//提交成功
// console.log("login:"+result);
// console.log("login2:"+JSON.stringify(result) );
if (result.data == ok) {返回‘ok
localStorage.setItem(login, ok);//浏览器保存登录成功
this.$message({
message: 登陆成功,
type: success,
});
this.$router.push(/home);//跳转页面
} else {
this.$message.error(密码错误);
}
})
.catch((error) => {//提交失败
console.log(Error, error.message);
this.$message.error(服务连接错误);
});
默认提交方式为Content-Type: application/x-www-form-urlencoded结果：
Content-Type: application/json;charset=UTF-8方式结果：
vue开发使用axios的时候报错
Cannot set property “axios” of undefined
前天写代码的时候，第一次用axios报了一个错，再三检查下，发现代码是没有问题的。然后检查了版本发现了问题。
打开package.json文件，找到对应的版本号。时至今日，axios最新的版本号是3.0.1，所以使用
npm install axios -S
npm install qs -S
npm install vue-axios -S
命令下载的时候会下载最新版本，就有了版本之间的不和谐。
下面是package.json中的版本信息。
"dependencies": {
"axios": "^0.20.0",
"element-ui": "^2.13.2",
"qs": "^6.9.4",
"vue": "^2.5.2",
"vue-axios": "^3.0.1",
"vue-router": "^3.0.1"
},
这个时候只需要把其中的"vue-axios": “^3.0.1”, 改成 “vue-axios”: "^2.1.5"就行了。
改完之后，要找到，文件夹中原来下载了的，并进行删除。
比如vue-axios我的是在D:\work\html\spa03\node_modules\vue-axios，就找到删除。
当然，不放心的，删错了的，只要把整个node_modules文件夹删除了就好了。
打开cmd窗口，进入文件夹路径，然后npm i,就可以下载刚刚删除了的所有版块。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！