vue自定义打包路径--springboot前后端分离（部署二）

最新推荐文章于 2024-07-28 17:46:11 发布
原创 最新推荐文章于 2024-07-28 17:46:11 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue自定义打包路径 #springboot-vue前后端分离

本文介绍了如何在Vue项目中自定义打包路径，包括在index.html、src/router/index.js和config/index.js中的修改步骤。完成设置后，将打包后的dist目录放入SpringBoot项目resource/static的自定义目录下，实现前后端分离的部署。

vue自定义打包路径需要修改三处：

1.在代码根目录下的index.html中增加 <meta base="/VmallAdmin/"> 如图所示。
在这里插入图片描述
2.在src目录下的router目录下，在index.js中，增加：
base: ‘/VmallAdmin/’, 如下图所示：

在这里插入图片描述

3.在项目路径下的config目录下，修改index.js。在build下将原来的assetsPublicPath：’/’
修改为assetsPublicPath：’/VmallAdmin/’
在这里插入图片描述
到这里，自定义路径就完成了。之后将打包后的dist下的目录放在springboot项目的/resource/static/自定义目录/ 下即可。如下图：
在这里插入图片描述

最低0.47元/天 解锁文章
基于SpringBoot+SpringCloud+Vue前后端分离项目实战 --开篇
天罡gg的专栏
03-07 2万+
如何高效学习Java? 毕业设计项目应该怎么做？入门实战项目应该怎么做？ 做Java开发都应该学习哪些框架技术？ 我想来跟你聊聊为什么要学习此专栏？我们经常说，看一个事儿千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样能够帮助你从高维度理解问题。同样，当你迷茫想努力没有方向时，最事半功倍的方法是：找人带你! 因为过来人，更懂得如何学、如何做、如何少走弯路！ 那今天就给大家带来一门专栏课程，由 天罡gg 和 经海路大白狗 两位实力大牛合力打造的一款专栏，可以让你从0到1快速拥有企业级规范的项目实战经验！
vue3+springboot前后端分离项目打包教程，附带一些问题的解决
weixin_72949205的博客
02-16 2558
vue3+springboot前后端分离项目打包教程，附带一些问题的解决
springboot实现前后端分离项目
07-31
springboot实现后端接口并通过前端展示, 通过springboot实现后端接口,再通过axios再前端解决跨域问题后用vue在前端展示数据,一个简单的前后端分离项目
SpringBoot前后端分离demo,后台工程+前台页面
01-08
包含后台的SpringBoot工程，前端的页面，和nginx-1.13.8的资源包，运行前请先阅读readme.txt。
SpringBoot2.2.6 整合Jwt实现前后端分离
04-23
SpringBoot2.2.6整合MyBatis3.5.4，利用JWT技术实现前后端分离 数据库采用的是MySQL
前后端分离SpringBoot
qq_44129924的博客
04-24 466
springboot 异常:No Java compiler available for configuration options compilerClassName: [null] and compiler: [null] 缺乏一个eclipse依赖 org.eclipse.jdt.core.compiler ecj 4.6.1 provided 创建springboot项目: 向pom.xml中添加jar包 <!-- spring-boot web启动器 --> <d
前后端分离之Springboot
qq_42873640的博客
04-29 3650
springboot后台搭建 本次搭建使用多模块的方式，建立一个父项目netseal，父项目下建立webserver、common、appserver等项目。 父项目——netseal，maven项目即可 子项目——webserver，springboot项目 子项目——common，springboot项目 idea进行项目的创建可参考使用idea搭建springboot项目 1. 创...
docker从安装到部署vue+springboot前后端分离项目（一站式）
最新发布
m0_72618563的博客
07-28 1507
docker怎么部署vue3+springboot前后端分离项目？从docker安装到项目部署，本文一站式解决！
Spring Boot+Vue前后端分离项目如何部署到服务器
interest_ing_的博客
03-13 3588
部署Spring Boot+Vue前后端分离项目到服务器涉及以下步骤：首先，将Spring Boot后端应用打包成jar或war文件并上传至服务器，通过运行`java -jar`命令启动后端服务。接着，构建Vue前端项目生成静态文件，同样上传至服务器的Web服务器目录，如Nginx的`html`目录。最后，配置Nginx作为反向代理，将前端请求代理至Vue应用目录，同时确保后端API的路径正确映射。这样，前后端分离的项目就成功部署在服务器上。
SpringBoot - 前后端分离
m0_51945098的博客
12-25 6111
前后端分离
基于Spring Boot 2.x的前后端分离架构X-Boot 后台.zip
09-24
基于Spring Boot 2.x的前后端分离架构X-Boot 后台。.zip,基于Spring Boot 2.x的前后端分离开发平台X-Boot 前端：Vue iView Admin 后端：Spring Boot 2.x/Spring Security/JWT/Spring Data JPA Mybatis-Plus/Redis/Elasticsearch/Activiti 分布式限流/同步锁/验证码/SnowFlake雪花算法ID生成 动态权限管理 数据权限 工作流 代码生成 日志记录 定时任务 第三方社交账号、短信登录 单点登录
Springboot项目与vue项目整合打包的实现方式
08-25
主要介绍了Springboot项目与vue项目整合打包的实现方式,本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Spring Boot 实现前后端分离
qq_43301731的博客
11-20 478
1.Spring Boot + CXF + WebService在第一个博客中写过连接在下边 https://blog.youkuaiyun.com/qq_43301731/article/details/103148113 2.本次直接写分离的部分 在上次的demo中，要做前后端分离，就不需要用到WebServiceClient这个类了 3.在新打开一个工作空间 注意：spring Boot 的运行不要...
Spring boot项目前后端分离开发的基础知识和基本环境配置
YUMIAloogy的博客~
04-17 2464
Spring Boot是由Pivotal团队提供的基于Spring的全新框架，旨在简化Spring应用（有很多个pom文件）的初始搭建和开发过程。Spring Boot是所有基于Spring开发项目的起点Spring Boot就是尽可能地简化应用开发的门槛，让应用开发、测试、部署变得更加简单。
vue打包和路由跳转
oO|0_的博客
06-01 2779
vue打包：(路径设置)图片引自网上（忘记哪里找的，多谢）路由跳转：1、&lt;router-link to='aac'&gt;aac&lt;/router-link&gt;import aac from './aac'2、事件触发，然后 this.$router.push('/aac');在main.js中improt aac from './aac'const routes = [{path:...
springboot项目，后台配置了项目根路径，vue打包部署到后台，生成的文件访问不到
salty_oy的博客
07-22 1035
修改vue配置文件/config/index.js： module.exports = { ... build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static'
VUE的dist文件如果集成到SpringBoot项目中
qq_48329942的博客
08-22 3211
目前流行的项目是前端端分离的，但是一些mini项目可以省略调nginx直接集成到springboot的项目中.
Vue打包文件dist放在SpringBoot项目下运行（正确实现全过程）（上）
你若为我繁华，我愿成你烟花
07-04 1904
项目开发中，一般我们都会使用SpringBoot+Vue进行前后端开发。在部署时，会后端启动一个服务，再启动一个nginx，nginx中配置前端打包文件dist进行项目访问。实际上，我们也可以把打包好的dist目录放在SpringBoot项目下进行部署。
vue打包后的dist整合到SpringBoot中
热门推荐
hanhanhanxu的博客
06-17 1万+
我的个人网站： http://riun.xyz 1、修改vuejs的config/index.js,在里面找到assetsPublicPath，改为/dist/,记住，是build:{}这里的，不是上面dev:{}的。 2、执行npm run build，会出现一个dist文件夹在vuejs项目目录里。 3、把这个dist文件夹copy到springboot的resources/static/，是整个dist连文件夹一起copy过来。如下图 4、SpringBoot项目只需要parent依赖和web依赖
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值