vue+elementUI的web项目 PC正常 谷歌浏览器模拟移动端正常 但是移动端访问页面点击按钮无效
1 起因
简单写好一个前后端分离的项目后，我发现在本地PC访问web可以正常使用服务，用谷歌浏览器模拟移动端进行测试也能正常使用服务。
手机移动端可以通过ip+端口号访问页面，但是点击页面按钮页面无反应，“看起来”就像按钮单击事件不起效。
下面是我逐一排除原因的过程
2 假定是单击事件出了问题
2.1 native
我以为是@click出了问题，别人说要用@click.native，但是我的情况是非常简单的把单击事件写在el-button上，代码如下
我测试了一下，如果要把单击事件写在el-row或者div上才需要这样做，所以这个建议并没有解决我的问题
<div class="checkpoint">
<el-row>
<el-button type="primary" icon="el-icon-refresh" @click="onCheckPoint" >roll关卡</el-button>
{{checkpoint}}
</el-row>
</div>
2.2 cursor : pointer
别人说，为要触发的元素增加 css 样式，设置 cursor : pointer 属性
我去css设置了，没效果
2.3 vue-touch
别人说有个vue-touch组件，可以实现移动端的滑动、单击效果，我以为VUE+ElementUI提供的@click只能给PC用，不能适配移动端，就想去试了一下。
照着别人的示例，在template下使用v-touch 并配置v-on:tap，PC能用，谷歌浏览器模拟的移动端能用，但是手机移动端依然没反映
<template>
<v-touch v-on:swipeleft="onleft" v-on:tap="onclick" class="wrapper">
<div class="menu-container" ref="menuContainer">
<!-- 这个是内容 -->
</div>
</v-touch>
</template>
2.4 touchstart
我还是惦记着@click是不是不能给移动端使用，就查了一下，百度提到HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。
移动端浏览器触摸事件
| 事件名称 | 描述 | 是否包含 touches 数组 |
|---|---|---|
| touchstart | 触摸开始，多点触控，后面的手指同样会触发 | 是 |
| touchmove | 接触点改变，滑动时 | 是 |
| touchend | 触摸结束，手指离开屏幕时 | 是 |
| touchcancel | 触摸被取消，当系统停止跟踪触摸的时候触发 | 否 |
进一步研究VUE如何设置touch事件，看到别人的示例，试了一下，@touchstart不会被PC端识别，但是可以被谷歌浏览器模拟的移动端识别，但是手机移动端依然是没办法。
<ul class="list">
<li class="item" v-for="item of letters"
:key="item"
:ref="item"
@touchstart="handleTouchStart"
@click="handleleterClick"
>{{item}}</li>
</ul>
3 发现原因是AXIOS的baseURL出了问题
https://blog.csdn.net/qq_42529402/article/details/106040633
看了别人的博客，我再回去看了一下自己的AXIOS请求方式。
我的项目前后端分离，前端首先写了一个util工具类request.js，对AXIOS进行封装，用于自定义异常捕捉，然后再根据这个request.js为各个模块编写调用后端接口的api.js，最后再把api.js的方法给各个模块的index.js使用
问题就出在我封装AXIOS的request.js，baseURL使用的是localhost：端口号。
这就导致我在本地测试时，PC和谷歌浏览器模拟的移动端都能正常向后端发送请求。
而其他设备访问我的网站后，AJAX请求无法发送到我的后端服务器，按钮的确被触发了，但是接收不到任何数据，就像按钮没被触发一样。
//创建axios
/*
* instance对象 就是axios
*
* */
const instance = axios.create({
baseURL: 'http://localhost:8088/',
timeout: 3000,
});
最后改一下baseURL就行了
//创建axios
/*
* instance对象 就是axios
*
* */
const instance = axios.create({
baseURL: 'http://后端服务器的IP:8088/',
timeout: 3000,
});
4 总结
-
vue-touch的v-on:tap和@touchstart都能替代@click让移动端实现点击事件 -
有时候并不一定是按钮无法触发单击事件，而是请求失败，导致“看起来”按钮无效
-
前端AXIOS请求后端时，baseURL不能设置localhost，得设置为后端服务器的ip
-
经过后续测试，
@touchstart和@click同时配置时，对于PC来说没有影响，PC只识别@click，对于移动端，说是会造成冲突，我没测试，有心人可以自己百度了解，再自己去测试一下吧。
