Vue + SpringBoot 前后端分离打包部署遇到的坑
1. 在vue项目的目录下,用npm run build 生成dist目录,将目录下的static和index.html复制到SpringBoot项目下的resource目录下
这个时候发现启动Springboot项目,不能打开index页面
比如: http://localhost:8087/index.html
起初百度之后一位是相对路径和绝对路径不正确的问题,就修改了Vue中confid下的index.js,将'/' 修改为带有点'./'的路径

后来发现还是不行呐,于是各种办法想着解决
加了一个默认的路径,访问/ 或者访问 /index 让其跳转到 index.html
于是想到要用模版引擎, 就加了thymeleaf,写了一个controller方法,只要访问根目录就自动跳转到index.html【此为解决方案1,以后上代码】
难道所有的项目都要这样去做?
仔细研究后发现,网上的教程都是将vue生成的文件,复制到SpringBoot项目下的resource目录下的新建目录static下,于是依葫芦画瓢,也就是说需要新建一个路径static,在static目录下放置index.html和static目录
妈呀,换了个目录,就可以成功访问了~~

难道所有的项目都要这样去做?为啥非得是static目录,我就不能指定一个目录吗?
当然可以了,在配置文件application.properies中添加如下代码即可
spring.resources.static-locations=classpath:/testFo

现在来讲讲为什么默认的非得是static呢?
因为Springboot默认的静态资源目录
classpath:/static
classpath:/public
classpath:/resources
classpath:/META-INF/resources
难道没有别的方式了吗?
有,既然是静态资源,能不能直接放在nginx上呢。可以的【之后再讲】
2. 部署好了,能访问页面了,本机啥都是好的,其他机器通过ip和端口访问,妈呀,只有页面,数据呢

Solution:
这个我不得不在我所有的接口前面加个api路径~也就是在配置文件中添加了一个默认访问的前缀~暂时还没有找到更好的办法
Vue + SpringBoot 前后端分离打包部署遇到的坑的更多相关文章
- 云计算:Ubuntu下Vue+Springboot前后端分离项目部署(多节点)
一.机器准备 首先准备三台机器: 我是一台WINDOWS系统主机,在WINDOWS里的 VMware 中安装两台Ubuntu系统虚拟机 如果你的虚拟机只有 CentOS,可以参考这篇文章:https: ...
- docker-compose 部署 Vue+SpringBoot 前后端分离项目
一.前言 本文将通过docker-compose来部署前端Vue项目到Nginx中,和运行后端SpringBoot项目 服务器基本环境: CentOS7.3 Dokcer MySQL 二.docker ...
- vue+springboot前后端分离实现单点登录跨域问题处理
最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登 ...
- Vue+SpringBoot前后端分离中的跨域问题
在前后端分离开发中,需要前端调用后端api并进行内容显示,如果前后端开发都在一台主机上,则会由于浏览器的同源策略限制,出现跨域问题(协议.域名.端口号不同等),导致不能正常调用api接口,给开发带来不 ...
- 解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
问题: 前端跨域访问后端接口, 在浏览器的安全策略下默认是不携带cookie的, 所以每次请求都开启了一次新的会话. 在后台打印sessionID我们会发现, 每次请求的sessionID都是不同的, ...
- 【笔记】vue+springboot前后端分离实现token登录验证和状态保存的简单实现方案
简单实现 token可用于登录验证和权限管理. 大致步骤分为: 前端登录,post用户名和密码到后端. 后端验证用户名和密码,若通过,生成一个token返回给前端. 前端拿到token用vuex和lo ...
- nginx+vue+uwsgi+django的前后端分离项目部署
Vue+Django前后端分离项目部署,nginx默认端口80,数据提交监听端口9000,反向代理(uwsgi配置)端口9999 1.下载项目文件(统一在/opt/luffyproject目录) (1 ...
- 一套基于SpringBoot+Vue+Shiro 前后端分离 开发的代码生成器
一.前言 最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成 止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
- SpringBoot+Jpa+SpringSecurity+Redis+Vue的前后端分离开源系统
项目简介: eladmin基于 Spring Boot 2.1.0 . Jpa. Spring Security.redis.Vue的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 ...
随机推荐
- 迅速生成项目-vue-nuxtjs
一.介绍nuxtjs 后端渲染开源库. 参考链接:https://nuxtjs.org/guide 语言:js 模版:vue 二.从脚手架生成项目(方案A) 推荐指数:
- C#自带的Version判断版本号的大小
Version version1 = new Version("1.0.0.25"); Version version2 = new Version("1.0.0.24& ...
- Python爬取网址中多个页面的信息
通过上一篇博客了解到爬取数据的操作,但对于存在多个页面的网址来说,使用上一篇博客中的代码爬取下来的资料并不完整.接下来就是讲解该如何爬取之后的页面信息. 一.审查元素 鼠标移至页码处右键,选择检查元素 ...
- 使用fiddl模拟弱网
原文地址:https://www.jianshu.com/p/71c3b4a49930 Fiddler-弱网设置 1.打开fiddler,点击 Rules->Performance-> 勾 ...
- phaser三个学生做题目
3个学生一起参加考试,一共有三道题,要求所有学生到齐才能开始考试,全部同学都做完第一题,学生才能继续做第二题,全部学生做完了第二题,才能做第三题,所有学生都做完的第三题,考试才结束 public cl ...
- Spring之27:BeanDefinitionRegistry
关于BeanDefinition见<Spring之Ⅰ:BeanDefinition> BeanDefinitionRegistry的类图: BeanDefinition 的注册接口,如 R ...
- 织梦安全防护:禁止uploads、data、templets执行脚本
下面介绍下如何针对uploads.data.templets做PHP脚本限制:对uploads.data.templets 三个目录做执行php脚本限制,就算被上传了木马文件到这些文件夹,也是无法运行 ...
- 交流绕组 & 感应电机
交流绕组 1. 为什么整距线圈产生的电动势最大? 整距时, 一个线圈的两根有效导体边之间相差180电角度, 线圈的节距因数为1, 线圈产生的电动势为单根导体边产生电动势的2倍, 为最大 2. 三相交流 ...
- A Story of One Country (Hard) CodeForces - 1181E2 (分治)
大意: 给定$n$个平面上互不相交的矩形. 若一个矩形区域只包含一个矩形或者它可以水平或垂直切成两块好的区域, 那么这个矩形区域是好的. 求判断整个平面区域是否是好的. 分治判断, 可以用链表实现删除 ...
- javascript 之 call,apply原理
一.call原理 1.使用JQuery的call功能 var add(c,d){ return this.a+this.b+c+d } var obj={a:1,b:2} add.Call(obj,3 ...