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的前后端分离的后台管理系统,项目采用分模块开发方式, 权限控制采用 ...
随机推荐
- Swift4.0复习类
1.类的属性: 2.类的方法: 3.类作为引用类型: “Swift新增了一对操作符 === 与 !== 用于判定同一个类的两个对象引用是否指向同一对象实例.” 摘录来自: “大话Swift 4.0”. ...
- ASP.NET(C#)图片加文字、图片水印,神啊,看看吧
ASP.NET(C#)图片加文字.图片水印 一.图片上加文字: //using System.Drawing; //using System.IO; //using System.Drawing.Im ...
- 使用jsPlumb插件实现动态连线功能
这周去看了两天的羽毛球亚锦赛,工作有提前晚上加班做一些,但是技术文章却拉下了. 这段时间一直在寻找可以实现前端元素动态连线的功能,找了好几个库,考虑过用d3或者原生svg和canvas来实现,最后和同 ...
- axios 使用入门
[Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门 一.前言# 在没有接触 React.Angular.Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重 ...
- PHP中的重载技术
PHP中的重载技术 通常面向对象语言的重载技术 其基本语法是这样的: 在一个类中,有多个同名的方法,每个方法的参数不同而已.这种现象就称为“重载”. 参数不同可以是:数量个数不同,或类型不同,或顺序不 ...
- 在eNSP上简单的模拟企业网络场景(不同网段互连)
额..首先你要有eNSP工具和Wireshark抓包工具,没有的话可以上网搜索一下,最好下载最新版本的,新版本中拥有更多型号的机器 这个实验我们主要模拟某公司购买了新的路由器和交换机.交换机S1连接客 ...
- 深入理解Flink核心技术及原理
前言 Apache Flink(下简称Flink)项目是大数据处理领域最近冉冉升起的一颗新星,其不同于其他大数据项目的诸多特性吸引了越来越多人的关注.本文将深入分析Flink的一些关键技术与特性,希望 ...
- 032 Android智能下拉刷新框架-SmartRefreshLayout+RecyclerView的使用
1.SmartRefreshLayout介绍 SmartRefreshLayout的目标是打造一个强大,稳定,成熟的下拉刷新框架,并集成各种的炫酷.多样.实用.美观的Header和Footer. 正如 ...
- wx.request 请求
wx.request 1.wx.request相当于ajax请求,和django后台进行交互 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...
- wc 指令
统计文件的行数, 字符数, 字节数. wc 命令的功能相对简单,参数也较少,但是是统计文本行数,字符数的利器.具体的参数和用法如下 语法 wc [OPTION]... [FILE]... wc [OP ...