首先, 从前后端分离的角度来说, 不建议将编译后的vue工程放到SpringBoot工程目录下从而部署在Tomcat下, 因为这有点违背前后端分离的设计. 建议将前端项目部署到专用的服务器（如Nginx）下，即分开部署后端代码与前端代码。本文仅作为技术性的探索。.

1. 修改前端编译配置

找到vue工程的 config/prod.env.js 文件(如果没有该文件可不处理), 修改 BASE_API 为正式环境后端服务API根地址:

'use strict'
module.exports = {NODE_ENV: '"production"',BASE_API: '"http://localhost:8000"'
}

找到 config/index.js 文件, 修改 module.exports 下的build中的 assetsPublicPath 为 ‘/’:

    /*** You can set by youself according to actual condition* You will need to set this if you plan to deploy your site under a sub path,* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,* then assetsPublicPath should be set to "/bar/".* In most cases please use '/' !!!*/assetsPublicPath: '/',

意即, 你设置为 ‘/’ , 表示编译后的静态文件要被部署到服务根路径下.
例如:
1.如果部署到Nginx, 映射到你Nginx的域名为 example.com 并且Nginx访问的根目录为文件夹A的话, 编译后的文件将会被部署到文件夹A路径下;
2.如果采用SpringBoot的话, 默认静态文件根路径为src/main/resource/static, 那么就需要将编译后的文件放在static下.

2. 编译前端工程

切换到Vue工程根目录, 例如:

cd eladmin-qd

执行npm编译

npm run build

这样之后就会在工程根目录生成一个dist文件夹, 编译好的静态文件就在这里面:

3. 部署前端工程到boot服务

将这个三个文件拷贝到SpringBoot工程的static文件夹下:

这样子之后打包的工程运行后可通过域名或ip 访问:

Vue项目部署到SpringBoot工程下相关推荐

vue项目部署到子路径下需要更改的设置
vue项目部署到服务器上会默认为例如ROOT的文件夹下,这样会直接访问改文件夹下的index.html文件. 假如现在有需求是把项目放到某一个子路径下,如果不更改设置会出现资源不加载,引用js文件找不 ...
vue项目部署在二级目录下
一般情况下,前端项目部署在各自端口根目录下.但是如果服务器端口限制等因素,多个项目共享一个端口,就需要部署在二级目录下. 但是会面临几个问题服务器配置前端静态资源路径配置前端请求路径写法前端路 ...
Vue——项目部署到非根目录下的解决方案
问题描述同一个生产部署项目,基内外网的访问路径并不相同,内网是基于域名根目录来访问,而外网却指向了一个子目录. eg. : vue-router: history模式内网环境:192.168.1. ...
vue项目部署后，font下文件夹样式都找不到
element-icons 和 fontawesome-webfont 等字体无法正常展示解决方法方法1 在build的文件夹里面的utils.js里面publicPath: '-/-/' 方法2 ...
将springboot项目和vue项目部署到windows 2016 server（服务器）
将springboot项目和vue项目部署到服务器 1.服务器环境配置 1.1 服务器需要安装的环境 1.2 服务器需要配置的入站与进站规则 2.springboot项目的打包 2.1 springb ...
springboot项目部署 + vue项目部署
部署一个简单的前后端分离的博客项目 springboot项目部署第一步:打包springboot项目(jar包) 第二步:将jar(项目的target目录下)包上传到云服务器上(Xftp) 第三步: ...
面试宝典六-- 项目部署（linux环境搭建，springboot项目部署，vue项目部署，nginx负载均衡）
环境准备实际开发中,项目肯定是部署在一个个的linux系统服务器中的,学习过程中,可以在自己电脑上安装虚拟机然后配置linux操作系统进行模拟项目部署,当然也可以花费较小费用使用各种平台提供的云服 ...
Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署搭建Vue环境新建Vue项目使用WebStorm开发Vue WebStorm相关配置配置路由全局页面App.vue 全局引入组件 ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
Springboot工程下使用mybatis反向工程
Springboot工程下使用mybatis逆向工程 1.引言 mybatis是目前很流行的持久层框架,其逆向工程更是大大缩减了我们的开发时间.所谓mybatis逆向工程,就是mybatis会根据我们 ...

Vue项目部署到SpringBoot工程下

目录

1. 修改前端编译配置

2. 编译前端工程

3. 部署前端工程到boot服务

Vue项目部署到SpringBoot工程下相关推荐

最新文章

热门文章