vue项目打包上传服务器 - vue-cli2 + vue-cli3 空白页,资源无法加载等常见问题解决

本文介绍了如何将Vue项目使用vue-cli2和vue-cli3打包并部署到Tomcat服务器,重点讨论了在部署过程中遇到的空白页和静态资源404问题的解决方案,包括修改index.html的引用路径和调整webpack.config.js中的publicPath。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。
如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助。地址链接:vue-cli 如何打包上线

先来描述一下期间遇到的问题有哪些:

1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。
2、打包好的静态资源均是绝对路径,无法引入进项目,也是 404。

1、项目目录结构

这里写图片描述

这是打包后的,所以有 dist 文件夹,打包方式:npm run build。

2、webpack.config.js

在这里插入图片描述

这里只是一小部分,因为这边最关键的就是 publicPath,下面会提,这边可以解决静态资源 404 无法引入的问题。

3、npm run build 打包后的文件。

npm run build 打包后生成一个 dist 文件夹,这里面的目录:

这里写图片描述

我对 webpack 打包工具的原理不是很清楚,所以文件夹应该生成什么不是了解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值