Vue项目部署到SpringBoot工程下

导读:本篇文章讲解 Vue项目部署到SpringBoot工程下,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

目录

首先, 从前后端分离的角度来说, 不建议将编译后的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 访问:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/114399.html

(0)
Java光头强的头像Java光头强

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!