Vue项目如何部署到SpringBoot工程下
更新时间：2024年07月03日 10:41:42 作者：dongdong咚咚咚
这篇文章主要介绍了Vue项目如何部署到SpringBoot工程下问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
首先, 从前后端分离的角度来说, 不建议将编译后的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 访问：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇webpack项目调试以及独立打包配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要为大家介绍了vue中v-if和v-show使用区别源码分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue组件之间的数据传递方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要为大家详细介绍了Vue.js实现图片切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
关于下拉类型多选组件Vue-Treeselect(键名转换)
这篇文章主要介绍了关于下拉类型多选组件Vue-Treeselect(键名转换)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要给大家分享了 v-bind的使用和注意需要注意的点，下面文章围绕 v-bind指令的相关资料展开内容且附上详细代码 需要的小伙伴可以参考一下，希望对大家有所帮助2021-11-11
vue3中使用keepAlive缓存路由组件不生效的问题解决
这篇文章主要介绍了vue3中使用keepAlive缓存路由组件不生效的问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-06-06
这篇文章主要介绍了vue-resource调用promise取数据方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本文通过实例代码给大家分享el-select 点击按钮滚动到选择框顶部效果,主要代码是在visibleChange在这个popper里面找到.el-select-dropdown__list,感兴趣的朋友跟随小编一起看看吧2024-05-05
element-plus的el-table自定义表头筛选查询功能实现
这篇文章主要介绍了element-plus的el-table自定义表头筛选查询功能实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
最新评论