解决方案:Springboot+Vue3+Mybatis+Axios 前后端分离项目中 遇见的若干报错和踩坑避坑(一)
【摘要】 @TOC missing script:serve报错问题:npm ERR! missing script: servenpm ERR! A complete log of this run can be found in:npm ERR! C:\Users.........问题原因:这个错误一般是忘记进入项目目录里面而导致的。解决方案:只需要先 cd 切换到创建的项目的目录里面再使...
@TOC
missing script:serve报错
问题:
npm ERR! missing script: serve
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users.........
问题原因:
这个错误一般是忘记进入项目目录里面而导致的。
解决方案:
只需要先 cd 切换到创建的项目的目录里面再使用npm run
serve,否则就会报错
跨域限制:CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
问题:使用Axios无法成功跨域
Access to XMLHttpRequest at 'http://localhost:8080/api' from origin 'http://localhost:8088' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
问题原因:proxy代理没配置好,或者springboot端的接口对应不上。
解决方案:1、检查vue.config.js
module.exports = {
devServer: { // 配置跨域代理
host: 'localhost',
port: '8088', //vue程序端口换成8088,避免与Spring Boot项目端口冲突
https: false,
open: true,
proxy: {
'/api': { // 匹配所有以 '/api'开头的请求路径
target: 'http://localhost:8080', // 代理目标的基础路径
changeOrigin: true, // 支持跨域
pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
'^/api': ''
}
}
}
}
}
2、检查axios请求:
axios.get('http://localhost:8080/api/connect').then(function(response) {
if (response.data) {
console.log(response.data)
}
}).catch(function(error){
console.log(error);
})
console.log("response done!")
3、检查后台代码,在后台controller加上@CrossOrigin注解
@RestController
@CrossOrigin
public class VueTest {
@GetMapping("/api/connect")
public String hivue(){
System.out.println("vue connect success!");
//System.out.println(mail);
//System.out.println(password);
return "regist successs";
}
}
this.axios is not a function
问题:this.axios is not a function或者this.$axios is not a function
解决方案:Vue抛弃了this的概念,不要再用this.
运行项目失败 显示:npm ERR! code ELIFECYCLE errno 1 …@0.1.0 serve: vue-cli-service serve
问题:
code ELIFECYCLE
npm ERR! errno 1
npm ERR! usermana@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the usermana@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
问题原因:可能是在某次关闭项目时出错,是node_modules丢失了部分文件
解决方案:删除node_modules,重新配置和安装依赖包
首先删除node_modules,然后强制清除缓存,然后重新安装
rm package-lock.json
npm cache clear --force
npm install
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)