问题描述：后台使用springboot，前台vue；部署的时候打成war包，但是无法访问!

一、首先我们看一下后台pom.xml文件依赖包，只需要如下即可(其他的依赖包不列出,自行添加)：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

二、其次前台使用的是vue3,未打包之前public文件夹下的index.html样式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>shop系统</title>
</head>
<body>
<noscript>
    <strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
</body>
</html>

三、打包之后还是如此，之所有造成这样的原因是因为没有添加如下js文件：
在前端根目录创建vue.config.js文件，添加如下代码即可（重点）

module.exports = {
    publicPath: './'
}

四、添加完上述配置文件之后，打包后dist文件夹下的index.html变成了如下内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <title>shop系统</title>
    <link href="css/app.128e6d53.css" rel="preload" as="style">
    <link href="css/chunk-vendors.3cc36cb5.css" rel="preload" as="style">
    <link href="js/app.5a11dc80.js" rel="preload" as="script">
    <link href="js/chunk-vendors.1bd59927.js" rel="preload" as="script">
    <link href="css/chunk-vendors.3cc36cb5.css" rel="stylesheet">
    <link href="css/app.128e6d53.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but vue_shop doesn't work properly without JavaScript enabled. Please enable it to
    continue.</strong></noscript>
<div id="app"></div>
<script src="js/chunk-vendors.1bd59927.js"></script>
<script src="js/app.5a11dc80.js"></script>
</body>
</html>

你是否发现了什么不一样的地方呢？

五、接下来，将前端的dist文件夹放到后台项目的如下目录中，格式如下：
在这里插入图片描述
六、直接打包，上传到服务器的tomcat的webapps下，启动后自动会解压，这里需要注意的一点就是需要修改tomcat配置文件server.xml,添加如下内容：
在这里插入图片描述

<Context path="/" docBase="dac" debug="0" privileged="true"/>

注：docBase设置为包名即可（网上也有其他设置，暂时没有验证）
其他的地方都无需修改，启动后访问：
http://192.144.218.214:8099/dac/index.html
这里我修改了端口号为8099

# tomcat
Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue