Vue2.5学习笔记 前后端联调 10.1-10.2

 

1.请求地址修改

在本地开发的时候 配置文件是这样：

   // Travel/config/index.js


    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
                '^/api': '/static/mock'
            }
        }
    },

当前端页面开发完成后，需要跟后端做联调的时候 就需要将target的值改成真实环境中的IP地址和端口。 下面的pathRewrite可以去掉  就直接/api对 XXX:XXX/api

2. 访问IP权限修改

目前用localhost访问是没问题的 但是如果用IP就会拒绝 因为我们是使用webpackage来管理我们的项目 默认情况下他是不允许用IP访问 所以需要修改下配置文件

代码中的这部分做修改

"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

然后重启服务 就可以了

3. bug修复

有一个bug在城市列表页。的字母列表那边

在真正手机上使用的时候会发现右边的字母表（Alphabet.vue）是无法使用的。

所以需要去做个优化。 进入Alphabet.vue

修改如下：

<template>
  <ul class="list">
    <li
      class="item"
      v-for="item of letters"
      :key="item"
      :ref="item"
// 这里
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
    >
      {{item}}
    </li>
  </ul>
</template>

这样就可以了

4. 兼容一些旧的操作系统或浏览器  

安装babel-polyfill 

npm install babel-polyfill --save

然后在main.js中导入

//main.js

import 'babel-polyfill'

如果还是有人打开页面白屏的话 那就应该是本地运行环境的问题。打包后在服务器上部署上线之后就能解决。