天天答题项目总结1——项目前期准备工作

项目前期准备工作

1. 移动端不同大小适配：
   之前采用的是rem的方法，现在有一种新的解决方案： 在vue移动端使用lib-flexible和px2remloader适配屏幕。
   具体方法： https://www.cnblogs.com/xieyong25/p/9596497.html

2. 解决VUE项目（或者说前端项目）在IOS端的手势缩放问题，避免用户进行网页的缩放问题：
   移动端web缩放有两种：双击缩放和双指手势缩放
   在 iOS 10之前，iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放：

   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   

   但 iOS 10开始，meta 设置在 Safari 内无效了。
   需要这样设置：（直接放在项目的index.html中)

   <script>
   window.onload = function() {
     // 阻止IOS双击放大
     var lastTouchEnd = 0;
     document.addEventListener("touchstart", function(event) {
       if (event.touches.length > 1) {
         event.preventDefault();
       }
     });
     document.addEventListener(
       "touchend",
       function(event) {
         var now = new Date().getTime();
         if (now - lastTouchEnd <= 300) {
           event.preventDefault();
         }
         lastTouchEnd = now;
       },
       false
     );
   
     // 阻止IOS双指放大
     document.addEventListener("gesturestart", function(event) {
       event.preventDefault();
     });
   };
   </script>
   

3. ** iphonex以上虚拟home键适配问题：**
   https://juejin.im/post/5d6cb884f265da03ae788f28
   (1)

   <meta name="viewport" content="viewport-fit=cover">
   

   (2) 使用constant函数和env函数将页面限制在安全区域内：（直接写在index.html）

   body {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
   

   当使用底部固定导航栏时，我们要为他们设置padding值：

   {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
   

4. vue配置跨域
   跨域问题可以在项目中配置，也可以通过谷歌浏览器配置
   项目中配置：
   config/index.js中

   proxyTable: {
         target: 'http://quiztest.17wanxiao.com:8089',  //这个是要代理的地址，开发阶段接口地址
         changeOrigin: true, //跨域要加上这个
         pathRewrite: {
           '^/api': '/'    //这里的/其实就代表根，可以理解为用/api代表target里的地址。
         }
       },
   

   谷歌浏览器中配置： https://blog.csdn.net/playboyanta123/article/details/83625710

5. vue项目打包后，部署到服务器，图片css等静态资源路径找不到

   在config（文件夹）—>index.js中，添加

   build: {
      index: path.resolve(__dirname, '../daily-answer/index.html'),
   
      // Paths
      assetsRoot: path.resolve(__dirname, '../daily-answer'),
      assetsSubDirectory: 'static',
      assetsPublicPath: './',
   }
   

6. 用vue做多页面应用的配置：（vue-cli3.0）
   https://www.cnblogs.com/AnnieShen/p/11240043.html
   https://blog.csdn.net/qq_21113235/article/details/89149386
   https://www.jianshu.com/p/98afaf4ca34c