2018年9月

以前就遇到这样的问题，但利用一些基本的百度，谷歌也能解决了问题，但是这次又遇到了，又出问题了...，记录一下

vue部署到Tomcat

后端同学用的tomcat，直接懒的麻烦，就打包给放到tomcat的webapps目录下

- webapps
  - dist
     - index.html
     - static

这样直接就xxx/dist来进行访问.......

部署过程，参考：为什么vue+webpack需要用到node，如何部署项目到服务器？

总结一下：以刚刚我部署的为例

单页面应用最重要的文件app.js，在wepack打包后在index.html中的引用是这样的：

<script type="text/javascript" src="/static/js/app.js"></script>

但我们放到服务器上后，访问xxx/dist时，实际上app.js的路径是xxx/static/js/app.js，也就是说此时index.html应该要变成如下才对：

<!-- 放到服务器后 -->
<script type="text/javascript" src="/dist/static/js/app.js"></script>

但我们不可能每次都手动去改吧，于是只要在webpack的config/index.js的build下修改成：

assetsPublicPath: './'
或者
assetsPublicPath: '/dist/'  （你放tomcat webapps下的目录名）

这样就成功一半了，但是记得我们还使用了vue-router啊，部署到线上会采用history模式（【源码拾遗】从vue-router看前端路由的两种实现），此时路由也要变成相对于/dist/（你放tomcat webapps下的目录名）来发请求啊

mode: 'history',
base: 'dist',

于是就完美了！

但有一个问题：history模式，当用户直接输入url（输错），例如xxx/dist/ddd，这时是找不到路由的，在Tomcat里面404页面该怎么跳回首页呢？

新建一个WEB-INF目录，在WEB-INF目录下新建一个web.xml：

- static
- index.html
- WEB-INF
  - web.xml

web.xml中如下，配置一下当404时，跳转回首页

<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">

  <display-name>webapp</display-name>
  <description>
     webapp
  </description>
  <error-page>  
   <error-code>404</error-code>  
   <location>/index.html</location>
</error-page>  
</web-app>

此时注意还需在router中配置一下，当404时，匹配到的路由：

{
    path: '*',
    name: 'errorPage',
    component: require('xxx').default  // 你的首页组件
},

参考资源：
Vue-router History模式下，空白页面，如何配置tomcat服务器
 vue路由中的mode : 'history',
HTML5 History 模式，个人觉得官方文档解释的并没有太清楚.....

vue部署到Nginx

待续...

vue部署到node

待续...

起因遇到一个使用了vantUI框架，但需要定制dialog的需求，所以只能去看vant的transition动画的实现，来满足自己的需求...

查看vant的源码

vant的源码可以在这里看到：https://github.com/youzan/vant/blob/dev/packages/vant-css/src/dialog.css

其中dialog的动效在这：

&-bounce-enter {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.7);
}

&-bounce-leave-active {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(0.9);
}

这个是用来控制dialog的中间部分的内容弹出的时候的变形动画（..不太好表述），但是试一下就会发现问题，这里没有mask啊，也就是说这里弹出dialog底部的淡黑色的遮罩的动效还得另找...

在公共的css样式中找到了一个fade-in/out：https://github.com/youzan/vant/blob/dev/packages/vant-css/src/common/animation.css

.van-fade {
  &-enter-active {
    animation: .3s van-fade-in;
  }

  &-leave-active {
    animation: .3s van-fade-out;
  }
}

@keyframes van-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes van-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

再平时使用vant的dialog组件时能查看到：

<!-- 未弹出前 -->
<div class="van-dialog" style="z-index: 2003; display: none;">...</div>
<div class="van-modal" style="z-index: 2003; display: none;"></div>

<!-- 弹出后（同时有class的切换） -->
<div class="van-dialog" style="z-index: 2005;">...</div>
<div class="van-modal" style="z-index: 2004;"></div>

可以猜测到，dialog和modal(也就是那个底部的mask)是一种同级组件的关系，而且应该是两个动画，因为同时有class的切换，最后的z-index也说明了这点，因为弹出后是同级关系，所以需要用z-index来控制内容显示在mask之上

使用chrome-devTools的animations工具

以上也只是猜测，想到动画，作为万能的chrome-devTools肯定会有检查动画的工具吧，果然：

google官方-检查动画（需翻墙）

Chrome DevTools谷歌浏览器开发者工具如何检查动画（不好翻墙的可以参考这个）

在devTools的面板里面打开右边三个竖点的菜单，打开more Tools选项，其中的animations就是动画检查工具了

两个用途：

检查动画：慢速播放、重播或检查动画组的源代码；动画检查器支持 CSS 动画、CSS 过渡和网络动画，当前不支持 requestAnimationFrame 动画
修改动画：修改动画组的时间、延迟、持续时间或关键帧偏移，不支持编辑贝塞尔曲线和关键帧

使用：

打开后，直接在页面开始的动画就会被记录下来，而且会被记录为一个个的动画组

动画组的概念：

例如这里是vant的dialog动画被记录下来的两个动画组，我们点击第一个就可以发现，第一个动画组是mask遮罩层的弹出动画，第二个动画组是dialog的弹出动画，而底部还有详细的动画元素，动画过程

控制动画播放速度：

在上述图示的1部分的100%, 25%, 10%,就可以进行动画的速度进行更改

在底部的动画帧图中，可以对动画进行

延后动画/改变动画：

在上述图示的4部分，我们可以对动画过程进行控制，通过整体拖动那个扇形区域就可以进行动画的延时，例如这样就可以把mask动画和dialog动画区分的更清晰，通过缩短那个扇形区域可以达到改变动画效果的作用

最终效果

有了工具的帮助，我们可以很准确的判断出有两个动画，而且可以对动画过程进行延时，减速，让我们对整个动画过程有精准的控制

于是我们用两个组件来做，一个mask组件（用来fade-in/out的效果），一个dialog组件（做transform效果）

最终代码如下：

<!-- dialog组件 -->
<template>
    <!--<div>-->
    <transition name="move">
        <div class="dialog" >
            <div class="content">
                <button @click="dispear">关闭</button>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {
            }
        },
        methods: {
            dispear() {
                this.$emit('close');
            }
        },
        components: {}
    }
</script>

<style lang="scss" scoped>
    .dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 85%;
        font-size: 16px;
        overflow: hidden;
        transition: .3s;
        border-radius: 4px;
        background-color: #fff;
        transform: translate3d(-50%, -50%, 0);
        z-index: 90;
        .content {
            width: 300px;
            height:200px;
            margin: 0 auto;
        }
        &.move-enter {
            opacity: 0;
            transform: translate3d(-50%, -50%, 0) scale(0.7);
        }
        &.move-leave-active {
            opacity: 0;
            transform: translate3d(-50%, -50%, 0) scale(0.9);
        }
    }
</style>

<!-- mask组件 -->
<template>
    <transition name="van-fade">
        <div class="mask"></div>
    </transition>
</template>

<script type="text/ecmascript-6">
    export default {
        data() {
            return {}
        },
        methods: {},
        components: {}
    }
</script>

<style lang="scss" scoped>
    .mask {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.7);
    }
    van-fade {
        &-enter-active {
            animation: .3s van-fade-in;
        }

        &-leave-active {
            animation: .3s van-fade-out;
        }
    }
    @keyframes van-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    @keyframes van-fade-out {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }
</style>

使用的时候，两个组件同时引用即可，最终效果：

总结：其实一开始没想到是有两个动效的，所以一直也没做出来，之后就放弃了，由于的确有一些弹窗没办法，只能去定制，所以就再次硬着头皮上，没想到原来是有两个transition，加上同级表示来做的（再次说明要善用chrome Devtools），感悟一句：chrome Devtools其实真的是前端入门的地方

vue 打包部署到服务器上

vue部署到Tomcat

vue部署到Nginx

vue部署到node

chrome-devTools的animations工具与vant UI框架的mask实现

查看vant的源码

使用chrome-devTools的animations工具

最终效果

最新文章

最近回复

分类

归档

其它