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

悠悠 2022-04-24 00:54 226阅读 0赞

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访问 所以需要修改下配置文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70][]

代码中的这部分做修改

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

然后重启服务 就可以了

3. bug修复

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

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

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

修改如下：

![20190411133946845.png][]

这样就可以了

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

安装babel-polyfill

npm install babel-polyfill --save

然后在main.js中导入

//main.js
    
    import 'babel-polyfill'

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdWx3eWI_size_16_color_FFFFFF_t_70]: /images/20220221/062c6991211948e5b1a65c507ff41411.png
[20190411133946845.png]: /images/20220221/4e3a8f2d72e54c17a0f4dcd9d021ab01.png