Vue打包部署到Tomcat服务器

article/2025/10/14 0:55:18

我使用的是Vue-cli(simple)脚手架,目录结构更为简洁。
在这里插入图片描述
修改相关的配置,避免部署后常出现的空白页问题,而引起这个问题的根本原因是资源路径问题:
1.一个是index.html中的build.js路径问题;
2.一个是dist中静态资源路径问题。

在webpack.config.js中

加.,将绝对路径改为相对路径。
在这里插入图片描述

在index.html中

同样加.,改为相对路径。
在这里插入图片描述

打包

在控制台运行npm run build命令开始对项目进行打包,打包后生成dist目录。

部署

新建一个项目目录如:pahms,将新生成的dist目录和原项目文件中的index.html复制到pahms目录中,然后再将pahms目录放到tomcat的webapps目录下启动即可。

提示

在打包过程中最容易出现的问题就是路径问题,如果页面显示异常,可以打开浏览器的开发者调试工具,通过network查看加载失败的资源路径具体是怎样的,然后自己做出相应调整即可。


http://chatgpt.dhexx.cn/article/AIm0Zjif.shtml

相关文章

vue 打包路由报错_急急急急,vue打包部署后,路由无法跳转

求助 vue打包部署后首页可以正常访问,可是一但点击下一步;就没反应;控制台报错: (打包后的index.html文件和JS文件分别部署在服务器的不同文件夹下,但是在index.html文件中的link路径也做过修改) 我的vue.config.js是&…

vue项目打包部署nginx(全流程)

在服务器上按照nginx: sudo apt-get install nginx 安装后nginx默认运行,在浏览器中打开IP地址,即可看到nginx画面 可以使用sudo systemctl status nginx查看nginx状态,图中主要看第三行Active 如果服务正在运行(活动…

Vue打包部署出现白屏

1、问题描述 我们用vue项目在本地跑的时候一切正常,当时我们用npm run build命令打包并部署服务器后,发现Index展示的是白屏,控制台显示资源都能正确访问到 2、原因 出现这个问题的原因就是Vue路由模式的设置问题,首先简单介绍一…

SpringBoot+Vue项目打包部署

本篇目录: 1. SpringBootVue项目分析; 2. 前后端打包; 3. 部署1. SpringBootVue项目分析 通常来说,如果采用这样的开发模式,该工程通常是前后端分离的项目; 就是前端美眉开发前端,然后调用张三…

vue打包部署到tomcat上 页面空白资源加载不出来

1.首先解决静态资源加载不出来的问题; vue3.0解决办法 需要在vue.config.js 添加 publicPath: ‘./’, vue2.0解决办法 找到config目录下的index文件 将assetsPublicPath:‘/’改为assetsPublicPath:‘./’ 做完第一步打包放到tomcat上 静…

vue打包放到java中启动_Springboot+Vue打包部署总结

文章目录 一、Vue打包+部署 1. 打包(npm run build:prod) 2.nginx部署前端vue项目 二、Springboot打包+部署 1.打包(mvn clean package) 2.部署 三、大功告成! 一、Vue打包+部署 1. 打包(npm run build:prod) 打完之后会在src同级目录下生成dist文件下,点开index.html页面在浏…

vue 打包部署在 nginx服务中,以及出现的一些问题

首先来说操作步骤 前提: 1、你已经安装/下载好 nginx 2、你的vue 项目已经打包完成,并得到了 dist 文件夹 部署开始: 1、vue 项目打包,在控制台输入 npm run build 等待打包结束后可在项目的同级目录下得到打包文件夹 dist …

ruoyi前后端分离vue打包部署发布

说明:打包使用的方式是把vue打包成dist文件后,放到若依的“ruoyi_admin”的静态文件模块下面,访问“http://localhost:9070/(端口“9070”是我自定义的)”即可! 步骤: 1、先打包vue后台管理系统…

vue项目打包部署流程

vue项目打包部署流程 一、打包二、部署三、部署多个项目 一、打包 (可选)去除打包后会生成的map文件:在vue.config.js中添加productionSourceMap: false, map文件作用:项目打包后,代码都是经过压缩加密的,…

TongWeb之vue打包部署

VUE静态资源打包部署在tongweb上刷新页面404问题问题现象 F5刷新就会出现404 问题处理方法 方法一&#xff1a;default-web.xml添加error-page标签 <error-page> <error-code>404</error-code> <location>/index.html</location> </error-…

vue打包部署axios跨域问题

工具版本&#xff1a; 【vue -V】:2.9.6 ide工具&#xff1a;VSCode / Idea 前提&#xff1a;我们前端vue工程需要单独部署 一、本地使用命令运行跨域问题。 外网访问的地址&#xff1a;https://www.runoob.com/try/ajax/json_demo.json 本地springboot接口访问的地址&#x…

SpringBoot + Vue打包部署到本地和远程服务器

最近碰到有人问如何将SpringBoot和Vue进行打包部署到Tomcat服务器&#xff0c;由于Vue接触不是很久所以我自己也感兴趣是如何打包部署到本地或者远程服务器上&#xff08;云端&#xff09;。恰好手上也有一个案例需要部署到远程Tomcat空间&#xff0c;琢磨了一点时间总算是搞清…

Vue项目如何打包并部署(nginx)

使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署。 一.打包 vue项目其实可以直接通过一下语句进行打包&#xff1a; npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建…

Vue项目打包以及部署

一. 打包 npm run build 打包项目后&#xff0c;出现dist文件夹&#xff0c;dist文件夹下的东西就是需要部署的项目。 但是遇到问题&#xff1a;index.html页面出现一片空白&#xff0c;右键检查network发现一堆错误。 解决&#xff1a;没有修改config配置文件&#xff0c;如果…

vue项目打包布署

我们使用Vue做项目时&#xff0c;基本都是前后端分离的&#xff0c;所以项目布署有时是前后单独部署。因此前端开发人员很有必要熟悉一下项目部署的流程。 Vue项目打包部署本身不复杂&#xff0c;不过一些前端同学可能对服务器接触不多&#xff0c;部署过程中还是会遇到这样那…

N皇后问题及答案解

题目 在一张N∗N的国际象棋棋盘上&#xff0c;放置N个皇后&#xff0c;使得所有皇后都无法互相直接攻击得到&#xff0c;&#xff08;皇后可以直接攻击到她所在的横行&#xff0c;竖列&#xff0c;斜方向上的棋子&#xff09;&#xff0c;现在输入一个整数N&#xff0c;表示在N…

N皇后问题递归求解(内附详细代码)

N皇后问题递归求解&#xff08;内附详细代码&#xff09; 内容描述 在n*n的方格棋盘上&#xff0c;放置n个皇后&#xff0c;要求每个皇后不同行、不同列、不同对角线。 解题思路 下面我们以4皇后问题举例&#xff1a; 设queen(i&#xff0c;n)是在1&#xff5e;i-1行上已经放…

八皇后 N皇后

参考打蓝桥杯的通信人 如侵删 所有代码与原博主的代码相似 自作主张的觉着数组设置的太多辽想着改一下代码 写了一个set函数起初简单的认为 把每一个数组元素设置为0 1即可 跑起来后发现有错误 后来修改发现可以设置数组元素 x 只要在同行列或者对角线就会1 符合多个条件就会再…

n皇后学习

洛谷P1219 回溯 #include<cstdio> const int N 13; int n, cnt, ans[N]; void dfs(int row) {if (row n) {if (cnt < 3) {for (int i 0; i < n; i) {if (i > 0)printf(" ");printf("%d", ans[i] 1);}printf("\n");}cnt;ret…

N皇后(回溯算法)

题目 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上&#xff0c;并且使皇后彼此之间不能相互攻击。等价于要求任何两个皇后都不能在同一行、同一列以及同一条斜线上 给你一个整数 n &#xff0c;返回所有不同的 n 皇后问题 的解决方案。 如图&#xff1a;黄色代表放…