Tomcat下部署vue项目[history模式]


1.项目发布后通常有两种访问方式,

第一种: IP+端口直接访问的方式,如 http://192.168.1.107:8080/
第二种:IP+端口+项目名,如 http://192.168.1.107:8080/saas/

2.第一种方式:ip+端口(前端后端修改)

范例:vue-cli 项目使用路由,tomcat 作为服务器,项目文件夹名 saas

步骤:

1.修改配置文件 router.js

export default new Router({
  mode: "history", // 将mode值改为history
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld,
    },
  ],
});

2.1 将 tomcat 下的 ROOT 文件中的内容替换(选择其一)

(此种方式需要删除 ROOT 文件夹下的全部内容,将打包的文件放进去,无需修改配置文件)
找到 tomcat 目录,将 tomcat->ROOT 文件夹中文件全部删除,将打包好的 dist 文件夹中的文件全部放到 ROOT 文件夹中。
image.png

2.2 修改 tomcat->conf/server.xml 配置(选择其一)

(此种方式无需删除 ROOT 文件夹中的内容,只需修改 serve.xml 中的配置)
找到 tomcat 目录,修改 tomcat->conf/server.xml,增加 Context 节点。设置 docBase=”/saas” 。其中的 saas 就是 webapps 目录下的项目名称(文件夹名)
**
微信图片_20200116134505.png

3.第二种方式:ip+端口+项目名(前端修改)

范例:vue-cli 项目使用路由,tomcat 作为服务器,项目文件夹名 saas

步骤:

1.首先创建 WEB-INF 文件,文件夹中创建 web.xml 文件:

因为是 history 模式, 要防止在路由下刷新变成 404 错误,这需要让 tomcat 都定位到首页,也就是 index.html 页,以往我们使用 Java 写 web 项目部署在 tomcat 时,通常都会有一个 WEB-INF 文件夹,并包含一个 web.xml 文件,而 vue 项目 build 之后只是纯静态资源项目,所以我们需要在 build 之后的 dist 文件夹里新增一个 WEB-INF 文件夹,并新建 web.xml 文件。
image.png

在项目目录下新建**WEB-INF**文件夹, 接着在**WEB-INF**文件夹下新建 **web.xml**文件,内容如下:

<?xml version='1.0' encoding='UTF-8'?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee/web-app_2_5.xsd"
         id="scplatform" version="2.5">
  <display-name>/</display-name>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

2.修改配置文件 router.js

export default new Router({
  mode: "history", // 开启history模式需要后端配置404时返回/index.html
  base: "/saas/", //当项目不在根目录时,必须添加子目录路径,否则空白页面
  routes: [
    {
      path: "/home", // '/saas/home'
      name: "home",
      component: home,
    },
  ],
});

3.修改 config 文件夹下的 index.js 中配置

build: {
    // Template for index.html
    index: path.resolve(__dirname, "../dist/index.html"),

    // Paths
    assetsRoot: path.resolve(__dirname, "../dist"),//构建输出目录,也就是构建后的东西都扔这里
    assetsSubDirectory: "static",//源子目录 除了index.html,其余的js img css都分在这里

    /**添加开始**/
    //tomcat webapps/sass/
    assetsPublicPath: "/saas/", //需要加上这一行项目目录,一个 / 表示根目录
        /**添加结束**/
  }

4.webpack 设置不打包文件WEB-INF

到此处已经可以成功配置一个 tomcat 服务下的 vue 的 history 模式的项目,但是不能每次打包去手动添加和更改新建WEB-INF文件夹吧,遇到过设置不打包文件 WEB-INF 文件时的配置未生效,导致 WEB-INF 下的 web.xml 文件被打包成 js 文件,导致当前路由刷新报 404 错误。
(这个错误找了 好久,以为配置好了,就 Ok 了,由于代码同步问题,没注意可能就发生问题,所以上传服务器前一定要记得检查下WEB-INF文件夹是否存在 web.xml 文件)

修改 webpack.prod.conf.js 配置

plugins: [
  // copy custom static assets
  new CopyWebpackPlugin([
    {
      from: path.resolve(__dirname, "../static"),
      to: config.build.assetsSubDirectory,
      ignore: [".*"],
    },
    /**添加开始**/
    {
      from: path.resolve(__dirname, "../WEB-INF"), // 不打包直接输出的文件
      to: "dist", // 打包后静态文件放置位置
      ignore: [".*"], // 忽略规则。(这种写法表示将该文件夹下的所有文件都复制)
    },
    /**添加结束**/
  ]),
];

关于此处的的设置不打包问题可以自行搜索,关键词:webpack 设置不打包文件
**
**

5.到此处前端已经成功配置了 tomcat 下 vue 的 history 模式

项目最终目录如下图
image.png

6.注意 vue-cli 3.x vue-cli 打包配置还需要设置以下内容:

module.exports = {
  publicPath: "/saas",
  configureWebpack: {
    performance: {
      hints: false,
    },
  },
};

4.结语

终于完成了,也是踩了不少坑和加上一些搜索,感觉目前给的文档都不太详细,所以自己写了一篇关于 tomcat 下的 vue 的 history 模式,希望能帮到大家,欢迎大家一起交流。


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论
 上一篇
vue修饰符 vue修饰符
目录导航 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind 修饰符(实在不知道叫啥名字) 1.表单修饰符填写表单,最常用的是什么?input!v-model~而我们的修饰符正是为了简化这些东西而存在的 1>.lazy
2019-10-22
下一篇 
vue的!class和!style vue的!class和!style
:style 总结:写 inline style 的方法跟 class 大同小异,一样可以使用阵列及物件语法,但在给css 属性时要注意有些以**-**连结的词,要改为驼峰式写法,或者是使用单引号括起来。 一. 对象语法<div id
2019-07-18
  目录