vue项目总结，项目期间遇到的问题、难点等。【不定期更新】

太过爱你忘了你带给我的痛 2023-06-08 06:42 4阅读 0赞

近期一直在做一个xxx中心的项目，先来吐槽下内心的想法，

要开发的项目需求很不明确，需求两周两周的更改，感觉每天并没有特别多实际的产出，总是感觉有点儿浪费时间。

虽然这样，但是作为开发，我们只能服从上级命令，好了，进入正题。

但是对我来说，感觉还好，需求的更改，对我来说又是新的开发，新的接触，同时也是在锻炼我的耐心和耐性。

### **------------正题----------分割线【1】2019-10-17 2019年10月17日15:00:10-----------** ###

第一次使用vue开发实际的项目，虽然之前也有写过，但是都是自己练手的，并没有实际的后端接口，这次对我自己来说也算是个小小的锻炼。项目开发过程中遇到的坑，以及bug，以及自己不会的地方挺多的，下面我就一一列举下。

（下面所有的问题，在我博客里面都会有）

**（1）axios请求中post请求的坑。**刚开始的坑是，使用axios的post方法请求数据，数据被拦截，数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的，需要自己判断，或者使用提请的 qs 方法，将传给后端的数据进行下处理。

**（2）路由传参的功能的坑。**之前一直使用路由传参，但是当本页面刷新的时候，页面上是没有参数的，因为参数是从上个页面传入进来的。   解决办法：使用了缓存，和vuex状态管理。但是由于项目并不是很大型的项目，所以使用最多的是缓存。

**（3）页面缓存的坑。**有个填写信息的页面，需要填写一部分信息，进入查新协议页面，返回的时候，页面上填写的信息还需要留存。  解决办法：使用vue提供的keep-alive，来完成页面的缓存的。

**（4）vue组件动态加载的坑。**由于首页的排版不确定，然后想着，让组件动态显示，根据后端传入的数据，传入那个组件的数据，就显示那个组件。解决办法：和后端商量好，做个标识。前端根据标识判断，动态显示组件。  使用到了vue中的<component :is=""></component>   , 刚开始想着是不是和原生js一样使用append直接可以插入进入呢，但是后来发现根本不可以，思路是可以的，但是实现起来是行不通的。因为append后面插入的必须是个节点，而不是组件。后来就去查阅vue文档。

**但是现在还有个问题，首页是通过动态组件添加的，数据得从后端接口返回，但是接口请求也是需要时间，所以，刚开始进入页面的是，页面先会是空白，但是这样的体验并不友好，会让用户感觉到页面就是一片空白，但是好的解决办法现在暂时没有想出来。好的解决办法还在寻找ing。【师傅有建议添加个加载的gif图，但是，感觉。。。，我在找下看还有别的办法没，实在没有的话，就只能添加个gif图了。】**

**（5）解析后端返回的map格式数据的坑。** 之前解析数据的时候，直接就可以拿去，然后直接渲染页面使用即可。但是这次遇到后端返回的是map格式的数据，这就得解析下了。  例如：body\['1'\]  。根据返回的格式，自己解析成自己需要的数据格式。

**（6）更新文件缓存的坑。**每次打包好文件给后端更新的时候，用户手机上总会留下，上次版本的信息，而且每次都得清下缓存，才会显示最新版本的数据。后来，我师傅提了个建议，让后端返回一个更新版本的接口，前端每次更新版本的时候，都会给后端传入时间戳，然后后端接收后判断和库里的时间戳是否相同，相同的返回不需要更新，不相同的话，返回要更新，然后前端这边的处理方法是：需要更新的话，清除掉缓存，刷新页面即可。

虽然说给.js  .css文件后缀加上时间戳也是可以的，但是页面的入口index.html每次都是一样的，所以。。。就不会更新，，百度一些说在nginx服务器上，写上强制更新，但是由于公司服务器上的文件很多，万一操作失误那就麻烦了。

**（7）h5页面打开调试日志。**h5页面不像小程序那样，直接可以打开控制台，在手机上查看日志，得需要自己安装vConsole的插件来实现。 详见博客：[https://blog.csdn.net/Miss\_liangrm/article/details/100867112][https_blog.csdn.net_Miss_liangrm_article_details_100867112]

**（8）获取首页链接里面的参数问题。**获取是可以获取到，只要不跳转出这个项目的页面，都是可以的，但是该项目链接了许多外链，所以，有时候返回的时候，页面就会显示空白，因为获取的参数出了问题。解决办法：将参数设置成了缓存，但是返回的速度快了，首页同样还是会出现拿不到参数，的问题。

**解决办法还在寻找ing。**

**（9）h5里面的搜索。**h5里面input实现在手机上按下“搜索”，“go”，“前往”等按钮的时候，同时会触发像PC端的Enter。 input标签需要设置属性：type="search"   。  详见博客 [https://blog.csdn.net/Miss\_liangrm/article/details/102520925][https_blog.csdn.net_Miss_liangrm_article_details_102520925]

### \----------稍后再更新--------------分割线【2】 2019年10月17日18:33:59------------- ###

**（10）登录接口bug。**需要判断 errCode  10001状态的情况。如果出现 errCode出现 10001，则清空原来的session，重新请求该网络请求。

### \----------------------------  分割线【3】2019年10月18日14:55:55 ------------------------------ ###

**（11）封装的请求方法不需要在传入相同的参数。**  封装的方法，每个方法里面都得传入sessoin，但是里面需要有个版本的方法不需要传入session，那么就得在封装的方法里面进行判断。详见博客：[https://blog.csdn.net/Miss\_liangrm/article/details/102593402][https_blog.csdn.net_Miss_liangrm_article_details_102593402]

(config.method == 'get') {
        console.log('config.params.version',config.params.version)
        if(config.params.version == 'v'){   // 在更新版本的接口里面会用到
          config.url = config.url
        }else{
          config.url = config.url + '?session='+localStorage.getItem('session');
        }
      }

**（12）省份地区判断的话，尽量不使用name判断，会有bug的。通过市区匹配省份的话，使用areaCode，有些文件是不一样的。**

**（13）进来不在index.html文件里面引入公共的文件，因为每次更新版本的时候，index.html 都是相同的，如果修改了公共文件，是会有缓存，不会更新。因为该公共文件后面没有添加时间戳。**

![20191018150338649.png][]

\----------未结束。下次继续

待优化的：

*  首页空白。【已解决】【添加了loading】
 *  页面更新版本缓存.  【已解决】（将获取连接的templateId写在Home页面）

if (templateId) {
        this.$store.commit('updateTemplatedId',templateId);
        window.localStorage.setItem('templateId', templateId);
        console.log('store===templateId',this.$store.state.templateId)
    }else{
        setTimeout(function() {
            window.location.reload()
        }, 1500);
    }

[https_blog.csdn.net_Miss_liangrm_article_details_100867112]: https://blog.csdn.net/Miss_liangrm/article/details/100867112
[https_blog.csdn.net_Miss_liangrm_article_details_102520925]: https://blog.csdn.net/Miss_liangrm/article/details/102520925
[https_blog.csdn.net_Miss_liangrm_article_details_102593402]: https://blog.csdn.net/Miss_liangrm/article/details/102593402
[20191018150338649.png]: /images/20230531/966ea732ff41496b8c67d71b14ebaac2.png