vue 我 使用的 是d2-admin-start-kit 框架，具体目录结构 可以在网上 搜索相关资料

我记录下，几个比较坑的点，方便后面自己学习，

目录

1、vue 项目目录

2、vue 打包

3 、springBoot 项目目录结构

4、maven 打包

---

     tomcat 下访问，项目需要 加上 项目名，形式如 ：http://127.0.0.1:8080/【项目名】mycloudwar /【页面】index..html

     但是 在eclipse 下跑springboot 项目时，没有中间的 这个项目名 【mycloudwar 】

      直接 执行 这个样子就 可以访问界面。 http://127.0.0.1:8080/index.html 

      我自己将代码打成war 在tomcat 下访问 缺取不到页面。搜索相关资料 是vue 的配置 问题，改了配置后打包运行，能成功的访问页面。

---

下面 一一 阐述

1、vue 项目目录

---

---

需要 修改的 地方 有 两个，第一的是 vue项目 下env文件 

# 网络请求公用地址 发交易网络
 VUE_APP_API=http://127.0.0.1:8080/mycloudwar 

这是 需要发交易的 请求地址，后面的 这个 mycloudwar 是 你在maven打包 后 配置的 项目名称， 这个名称必须配置 一致，不然，发不了交易。

第二个需要 修改的 地方是 vue.config.js这个文件，

 // 基础路径 注意发布之前要先修改这里
let publicPath = '/mycloudwar/'  这里的 publicPath 也是 必须和 你在maven打包 后 配置的 项目名称 相同，所以，在配置springboot的 pom.xml 时，我 指定，打包的名称：

<build>
    <finalName>mycloudwar</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

这里的  <finalName>mycloudwar</finalName> 就 和 vue 里面配置的文件一致。

---

2、vue 打包

---

控制台 cmd 到 vue项目 所在的路基 输入npm run build:nomock  打包. nomock 是不需要本地测试数据。

我的打包路径  F:\vue\d2-admin-start-kit> npm run build:nomock 

---

 

---

然后 在 你的vue 项目 所在的路径下 会生成一个 dist 文件夹，如上图，

将dist 文件夹 里面的 内容 ，全部拷贝到 ，eclipse里面你自己的 springboot 项目 的 src/main/resources 目录下的static文件夹里，如果 没有static 文件夹，自己新建一个。如下图

到这里 你离成功就很近了。

---

3 、springBoot 项目目录结构

---

---

上图  我是使用 STS 的eclipse版本，自带springboot 集成工具， 为什么要 这么放置，可以搜索项目资料，另外 启动 类中添加我圈的这个 方法，也可以百度下。

---

4、maven 打包

---

这个不用多说了， 直接 maven build 就行。最后会在 项目所在的目录生成 target 包，将这个包里面生成的war包 拷贝 到 Tomcat 下的 webapps 下 ，然后 运行就可以了。

这里 我也遇到一个坑， Windows下 运行不了 Tomcat， 

 解决方法：在Tomcat的 bin 目录下 编辑文件 startup.bat 。添加：SET JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121 这个是jdk所在的位置。然后 再来运行。终于将项目运行起来了。

截图庆祝

---

 

介绍得有点啰嗦，请不要觉得烦，大家共勉