vue+jetty部署

基于对vue的学习，在不考虑seo的情况下，怎么将vue发布到后端， 并且使用jetty、tomcat等java容器实现部署，并且自由切换页面，实现和yarn serve或者npm run dev等方式的启动。

打包配置

不需要使用webpack等打包工具，默认使用vue-cli手脚架的vue-cli-service

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
    }

编写vue.config.js

module.exports = {
    publicPath: '/demo/',      // 部署应用包时的基本 URL
    outputDir: 'demo'        // 指定打包输出目录
}

运行打包命令 yarn build

Jetty或者tomcat部署

将打包完成后的目录文件复制到webapps下，我是将整个demo文件夹复制。
然后在demo文件夹下新建WEB-INF文件夹，在WEB-INF文件夹下新建web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1"
    metadata-complete="true">
<!-- 配置访问请求路径ip:port/demo -->
<display-name>/demo</display-name>
<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>
</web-app>

PS:在省略WEB-INF的情况下，也是可以直接访问到demo下的vue项目，但是只是将其作为静态资源进行访问，而在请求其中的单页面时，比如在demo中除了默认进入的home页面，还有login等页面，在直接访问long页面时，由于demo下没有web.xml文件，所以url的请求是完全交给jetty等容器处理的，不会将其中的请求交给通过vue router,而vue router能处理的只能是页面内的请求内容，也就是this.$router.push({name:'login'})这种由js控制的请求，只能在内存中进行页面的跳转，而无法获取到浏览器地址栏的请求。因此在跳转到login后无法正常的F5刷新，而添加web.xml就是告诉java容器要将display-name这个路径的请求内容交给demo去处理，这样vue router就可以对其进行接管。