各种问题汇总解决方法,持续更新中... vue优化相关---性能篇

时间:2024-02-20 16:08:22
var swiper = new Swiper(\'.swiper-container\', {
                pagination: {
                    el: \'.swiper-pagination\',
                },
                loop: true,
                speed:1000,//匀速时间
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                pagination:{   //点击分页器
                    el: \'.swiper-pagination\',
                    clickable: true,
                    clickableClass : \'my-pagination-clickable\',
                  },
                 on: {  //额外添加,解决移动端,最后一个轮播不显示,需要点击后显示问题
                  slideChangeTransitionEnd: function () {
                    $(window).pullpageImg()
                  },
                }
            });

 轮播的图片加上nolazy

<img src="https://img.hbhcdn.com/zhuanti/2007303/img02.jpg" nolazy alt="" />

解决如下问题:

第一张或者最后一张图片不显示

 

 2. vue解决页面不会重新渲染问题 

 this.$forceUpdate(); //强制刷新,解决页面不会重新渲染的问题

 

3.移动端    ::after  和 ::before  作为修饰线条  在手机上不显示问题

将像素rem改为px  则显示正常

4.webpack4加载\'style-loader\',模块加载失败问题:

 

 5. webpack4.x  解决打包后css背景图片路径错误问题

第一部分,插件注入

let MiniCssExtractPlugin = require(\'mini-css-extract-plugin\'); // CSS抽离插件

 

第二部分,插件实例

 plugins: [   //插件集合
     new MiniCssExtractPlugin({  //使用extractTextPlugin插件时,需要配置publicPath: "../", 不配置时css文件中背景图默认地址会在css文件夹下查找图片资源,导致项目图片路径不正确
            filename:\'css/main.css\',  //抽离的css目录和打包后的名
            //publicPath: \'../\',         // 注意配置这一部分,根据目录结构*调整
        }),
]

 

第三部分,

module: {   //匹配文件进行处理
        rules: [       
      {
            test: /\.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
                    options: {
                        publicPath: \'../\' //这个option必须写,否则css中图片路径可能会出错
                    }
                },     
                \'css-loader\',  //必须在\'css-loader\'下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置
                \'postcss-loader\'  //css属性加前缀的插件
            ]
          },
        ]
}

 

6.webpack 代理 

devServer:{  //开发服务器配置
        port:4000,  //端口更改
        progress:true,  //进度条
        contentBase:\'./huild\',   //指定目录作为静态服务 
        proxy: {   //反向代理
            \'/api\': {
                target: \'http://localhost:3001/api\',  //// 接口的域名
                changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                secure: false,  // 如果是https接口,需要配置这个参数
                pathRewrite: {  //// pathRewrite 来重写地址,将前缀 \'/api\' 转为 \'/\'
                    \'^/api\': \'\'   
                }
            }
        },
    },

 

7.webpack4.x  打包html文件中图片路径无法被正常解析

<img src=\'./banner-nav_03.jpg\' alt="" />  //打包前

<img src={"default":"img/707db1c5ca948b9ffa6f23cc306c102c.jpg"} alt="" />//打包后

使用插件:

 {
                test: /\.(htm|html)$/i,        //打包html中的img  src
                 use:[ \'html-withimg-loader\']   //有bug,已解决
 },
{
                test: /\.(png|jpg|gif)$/,   //js中对图片进行打包
                use: [
                  {
                    loader: \'url-loader\',
                    options: {
                        limit:1*1024,     //小于多少 将图片转base64,减少http请求,图片文件增大三分之一  
                                            //一般用于小图标
                        outputPath:\'./img/\',   //img文件目录 ,没有就自动创建
                       // publicPath:\'http://www\',
                       esModule: false,   //解决HTML中图片 src无法被解析的问题
                    }
                  }
                ]
 },   

esModule: false  必须加上,否则html中的img src 会解析错误

8.  webpack4.x    css-loder解析文件报错

曲线救国解决方案:重新配置node_modules文件 及package.json

 

9.npm install 报错问题

 解决方案:删除C:\Users\{账户}\下的.npmrc文件..

C:\Users\Administrator\.npmrc

 10 .webpack4.x中常规错误:   单词拼写报错

 

11.Vue父组件向子组件传递一个动态的值,子组件只能获取初始值,不能实时更新?

11-1.watch监听父组件传过来的值

11-2.对数据的处理,在watch中.而不是mounted中

export default {
  components: {},
  data() {
    return {
      str: "",
    };
  },
  props: ["msg"], //接受父组件传的值
  watch: {                    //通过watch来监听msg
     msg(curInfo, oldInfo) {  //特别注意是监听msg,而不是str
        if (curInfo) {
        this.str=curInfo;//赋值需要在此处
            console.log(curInfo);  
            this.getPerMsg(curInfo);
        }
    }
  },
  methods: {
      getPerMsg(data) {
          console.log(data)
      }
  },
  mounted() {
    
   
  }
};            

 

12.jquery设置 animate方法  scrollLeft属性     出现了滚动闪烁无法滚动的问题

 

 

起因:jquery设置 animate方法  scrollLeft属性     出现了滚动闪烁无法滚动的问题,发现是animate重复执行了。

解决办法:在animate方法前面加入stop()清空 防止重复执行。

 

container.stop().animate({   //设置stop()

                                     scrollLeft:itemOffsetLeft - centerLeft
                                 })

13 .TortoiseGit     128  推送报错

 

14. TortoiseGit  图标不显示

正常情况应如下图:

 

 

 解决办法: 

1.  ctrl + r 输入   regedit    然后注册表就打开了

2. 依照路径:     HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers

3. 找到 Tortoise 相关的文件夹  ,然后将文件夹名字加上空格 , 空格加的最多, 最靠前 

4. 然后按下 F5 刷新 , 就可以看到加完空格的排序情况了

如下图:

 

5. Ctrl + Alt + Del   打开资源管理器  , 然后将文件管理器关掉 

6. 在打开没有显示的文件所在文件夹瞅瞅 , 应该是大功告成了

 

 15.webpack4.x  中设置new HtmlWebPackPlugin()中的chunks属性,并未加载对应的js文件

 

 

 

 

 图2

 

 

 解决办法:是因为entry需要写成对象形式 ,

 

 

 16  npm登录报错

 17.webpack4.x      img打包报错

 

 

 

 问题原因:img-webpack-loader版本问题导致,建议版本4.6.0

 

18.vue启动报错 

vue@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

 

 

 

 

 

原因: webpack3.x的版本与webpack-dev-server3.x 的版本不兼容。

解决办法:

//安装指定版本
 
cnpm install webpack@3.8.0 --save-dev
 
cnpm install webpack-dev-server@2.9.7 --save-dev

 19.vue嵌套路由  点击后地址栏无反应

 

 

 解决办法:将   beforeRouteUpdate() {}, 注释去除

 

20.vue-devtools  插件安装后   F12 没有vue选项

 

 原因之一:vue.js为压缩版  (vue.min.js)

解决方案:将文件换为开发版 (vue.min.js)

21.使用swiper插件内容div莫名被撑大

 父级为flex盒子的子集,没有固定的宽导致

浮动,绝对定位 都会造成此影响

swiper-container或者父级的宽必须为固定值

 22.iphone不渲染渐变色字体不显示问题

 

 加上前缀依然不显示

原因:background为简写所以不渲染页面,必须写为background-imag

 

 23.  移动端监听  touchmove  事件,拖拽时 e.changedTouches[0].pageX   和元素初始位置混乱

解决方案:在touchstart  事件中将  e.changedTouches[0].pageX   和元素初始位置深克隆

 24.webpack  html和css热替换 (不刷新页面)

方案一 : 

   hotOnly:true,

   hot:true

 

现象 1:

  在webpack.config.js中可能未配置  js  文件ES6  和ES7 语法解析 ,所以可以使用node模块引入的方式引入文件

 

方法二: 在入口文件中 : 

   css文件和html 文件可以用requier()的方式导入

 

方法三:  用 import  导入

      ES6和ES7  语法解析相关依赖
    babel-loader@8.1.0  @babel/plugin-proposal-class-properties  @babel/plugin-proposal-decorators  @babel/plugin-transform-runtime   @babel/preset-env

 

webpack.config.js中相关配置: 

 module: {
        rules: [
            {
                test: /\.js$/, //匹配所以js文件
                use: [{
                    loader: \'babel-loader?cacheDirectory\', //开启转换结果缓存
                    options: { //将es6转为es5
                        presets: [
                            \'@babel/preset-env\', //babel-loader调用@babel/preset-env核心模块对es6进行处理为es5                      
                        ], //注意代码上下顺序
                        plugins: [
                            [\'@babel/plugin-proposal-decorators\', {
                                "legacy": true
                            }], //  @babel/preset-env下的子模块,打包解析es7为es5                                                                
                            [\'@babel/plugin-proposal-class-properties\', {
                                "loose": true
                            }], //   解析ES7中@修饰器                                                                 
                            \'@babel/plugin-transform-runtime\', //解析ES6异步函数generator函数      测试:只会对index.js进行解析                                  
                        ]
                    }
                }],
                exclude: /node_modules/, //匹配js文件中,排除node_modules文件夹目录下的js文件
                include: path.resolve(__dirname, \'/src/js\'), //到src文件夹下找js文件
            },
        ]
    }

现象2:

 方案四:

设置  

devServer{
  hot:true,
}

只热刷新一次

解决方法:

1. 导入webpack模块

let webpack = require(\'webpack\') //引入webpack模块

2.加载热更新插件

 plugins: [
    new webpack.HotModuleReplacementPlugin(), //热更新插件
]

3.去除 devServer 中的hot , 如果 package.json中 设置了 --hot  ,  也将其去除

 

 

25.点击返回,如果有上一页则返回

<script type=”text/javascript”>

function goback()

{

  document.referrer === \'\' ?
          window.location.href = \'http://www.codebye.com/index.shtml\' :
          window.history.go(-1);
}

</script>

26.swiper 在tab切换后的轮播问题

 1. 在swiper配置对象中添加这两个属性 , 可以解决  当swiper插件遇到tab切换,即display的显示与否属性时失效的问题 . 

observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper

2.  加上以上两个属性后 , 在tab切换后  , 轮播可以滑动  , 但不会自动轮播 , 必须滑动之后才开始自动轮播的问题
解决方案:   需要在点击tab中   重新 new Swiper(节点 ,  {  配置的属性 })

27.git绑定url报错

 

 输入命令 删除后,再次执行添加就可以了。

  1. git remote rm origin

  2.git remote add origin git@github.com:1376258881/-1.0.git

28.git 提交账号名和密码错误时

清空原有的账号和密码

  git credential-manager uninstall

29.弹性盒子中元素溢出问题

 问题描述:
width:100%时 , 无论自己是否有宽度 都会存在元素溢出问题
解决方案: 原因是 justify-contentspace-around; 的问题造成的, 需要改为 space-between; 或者直接去除 justify-content

 

 

 

30.IOS上html,body添加overflow:hidden会导致手机端上下滑动卡顿。

解决办法:加上overflow:hidden之后,再加上-webkit-overflow-scrolling : touch;

 

31.firebox 页面切板  ,  图片之间出现白线问题

 

 

 解决办法:

*{ margin:0; padding:0} 

img { display:block; font-size:0; border:0;}

.big {

 font-size:0; 
}

 

32.element  自定义表头v-slot 作用域插槽提示报错

 

原因:这是eslint规范,定义了没使用scope

如果去掉自定义表头就将失效,.

解决办法:将   v-slot="scope"  改为   slot-scope="{}"

注意: 如果在表单中使用了scope  , 则 改为slot-scope="{}" 会报错

 

33.vsCode中使用Live server 注意

 

33.滚动条未显示

 

 

 

 

  解决方案: 原因所有的父元素中存在overflow:hidden   给上一级父元素加上height  且上一级父元素height < 存在overflow:hidden的父级高度

34.ios移动端动画定位问题

 

 

 以上问题 , 将文字图片或者div同时加上定位和动画 , 会出现定位距离不对的问题 ,

解决办法 :动画条件不能用left top right  bottom 属性来做 , 将在图片父级加上定位 ,在图片上用margin来代替left top right  bottom 

 

@keyframes block{
  0% {   margin-top: 0;/*用margin来代替top , 问题解决*/   }   100% {   margin-top: 100%;   }
}

 

35.swiper无法匀速滚动 

 var mySwiper2 = new Swiper(\'.swiper-container\', {
     direction: \'vertical\', //向上
     speed: 2500, //匀速时间
     autoplay: {
         delay: 0, //必须设为0
         stopOnLastSlide: false,
         disableOnInteraction: false, //手指划过后继续轮播
     },
     loop: true,
     freeMode: true,
     slidesPerView: 5, //默认显示数量
     autoplayDisableOnInteraction: false,
     spaceBetween: 5, //slide之间的margin
 });

 swiper 仅仅参数设置 ,  不能匀速滚动 

解决办法:  加入如下css

.swiper-container-free-mode>.swiper-wrapper {
  -webkit-transition-timing-function: linear;    
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear;
  margin: 0 auto;
}

 

36.ios移动端点击没触发点击事件

需要给被点击元素加上

cursor: pointer;

 

37.webpack   autoprefixer给css添加前缀 , 并没有添加且不报错

 

未解决问题前的配置

 {
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
                        options: {
                            publicPath: \'../\' //这个option必须写,否则css中图片路径可能会出错
                        }
                    },
                    \'css-loader\', //必须在\'css-loader\'下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置
                    \'postcss-loader\',
                    {
                        loader: \'postcss-loader\',
                        options: {
                            plugins: [
                                require(\'autoprefixer\'),
                                //require(\'cssnano\'),<= 需去掉,因为会去掉注释
                                require(\'postcss-px2rem\')({
                                    remUnit: 50,
                                    remPrecision: 2 //精确到多少为小数点后位
                                })
                            ],
                        }
                    }
                ]
            },

postcss.config.js 文件配置

module.exports = {
    plugins: [require(\'autoprefixer\')], //配置插件  给css加前缀 
}

如何解决

方法一:

根目录下加入  .browserslistrc 文件 内容部分

文件内容

 

> 1%
last 7 versions,
not ie <= 8,
ios >= 8,
android >= 4.0

 

方法二:

package.json文件中加入

"browserslist": [
    "> 1%",
    "last 7 versions",
    "not ie <= 8",
    "ios >= 8",
    "android >= 4.0"
  ],

webpack.config.js文件中

加入

const autoprefixer = require("autoprefixer");

css文件loader配置改为

{
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader, //将解析的css抽离为main.css文件
                        options: {
                            publicPath: \'../\' //这个option必须写,否则css中图片路径可能会出错
                        }
                    },
                    \'css-loader\', //必须在\'css-loader\'下面,添加css前缀,配置同级目录下的postcss.config.js文件,进行配置
                    \'postcss-loader\',
                    {
                        loader: \'postcss-loader\',
                        options: {
                            plugins: [
                                //require(\'cssnano\'),<= 需去掉,因为会去掉注释
                                require(\'postcss-px2rem\')({
                                    remUnit: 50,
                                    remPrecision: 2 //精确到多少为小数点后位
                                }),
                                require(\'autoprefixer\')({
                                    browsers: [
                                        \'last 10 Chrome versions\',
                                        \'last 5 Firefox versions\',
                                        \'Safari >= 6\',
                                        \'ie> 8\'
                                    ]
                                })
                            ],
                        }
                    }
                ]
            },

 38.webpack   postcss-loader 加载plugins报错

  

 注意: autoprefixer 和  postcss-loader  版本问题 , 也会报错

个人使用版本可供参考:

webpack@4.43.0
webpack-cli@3.3.11
postcss-loader@3.0.0
autoprefixer@8.0.0

39.webpack模块加载报错

 

40.webpack entry入口可能错了

Insufficient number of arguments or no entry found.
Alternatively, run \'webpack(-cli) --help\' for usage info.

 

解决办法: 修改为正确的入库

 

41.vscode中 使用 yarn 报错

 

 

 解决办法:

1. 先关闭vscode 

2. 鼠标右键 ,   管理员身份运行vscode

3.在vscode命令行中输入   get-ExecutionPolicy     

  显示  Restricted  说明被禁止了

4.在vscode命令行中输入   set-ExecutionPolicy RemoteSigned

  再次输入 get-ExecutionPolicy   

  显示  RemoteSigned  说明问题已经解决了

 

41.win+D无效

解决办法: win+R  运行   regsvr32 /n /i:u shell32   然后重启

 

42.QQ消息默认浏览器ie更改

原因:某些电脑管家将默认浏览器设置为ie , 或者是QQ 设置中  安全设置 >安全推荐  那块设置了默认浏览器

解决办法:

1.腾讯管家设置默认浏览器

 点开腾讯管家>工具箱>浏览器保护 >默认浏览器设定

2.360卫士设置默认浏览器

点开360卫士>功能大全>我的工具>主页防护> 锁定默认浏览器

 

43. position:fixed失效问题

原因1.是因为有父级 css动画属性中设置了 perspective和transform-style: preserve-3d;

原因2:受transform影响 , 设置 fixed 的自身节点 和 父级中同时存在transform;

 

44.git bash使用vue-cli创建项目无法切换选项

1.命令行输入 :   winpty vue.cmd create hello-world

关闭命令窗口 , 重新打开 , 就OK了

2.找到git bash 的安装目录,找到bash.bashrc文件

 

 

然后 , 打开它 , 加上这句  alias vue=\'winpty vue.cmd\'

 

 

45.Sublime Text 无法使用Package Control的解决方法

主要由于国家防火墙GFW的限制,https://packagecontrol.io/channel_v3.json 无法访问到。

 

  1. 1.前往https://github.com/HBLong/channel_v3_daily下载channel_v3.json文件到本地计算机。
  2. 2.点击Sublime菜单栏上点击 Preferences > Package Settings > Package Control > Settings - User
  3. 3.添加 “channels”: [“c:/sublime/channel_v3.json”],其中括号内为自己刚下载保存的channel_v3.json文件绝对路径。

参考文章:https://www.shawnlin.cn/sublime-text3/

 

46.position: sticky失效

解决方案 :

  1. 所有父元素中不能overflow:hidden或者overflow:auto属性
  2. 必须指定top、bottom、left、right4个值之一,否则只会处于相对定位
  3. 父元素的高度不能低于sticky元素的高度

 

 

46.webpack   安装image-webpack-loader@4.6.0  报错 ‼ getaddrinfo ENOENT raw.githubusercontent.com raw.githubusercontent.com:443

原因:检查发现,是由于近期Github的raw文件读取地址遭受DNS污染,导致文件下载困难。

 解决办法:

 1.打开目录:C:/Windows/System32/drivers/etc/

 2.在最后添加199.232.68.133 raw.githubusercontent.com

 

 

46.vue  组件未渲染  标签显示传递数据为 [object Object],[object Object],[object Object]

原因: 避免组件名语义化或者props 属性名与传递监听的名不一样

 

47. Vue项目中刷新当前页面

   this.$router.go(0);
 
衍生问题:  当前页面参数变化 , 页面不刷新问题解决
  
watch: {
    $route() {
      this.$router.go(0);
    },
  },

 其中this.$router.go(0)为刷新页面,但此方法可能在Safari中无法实现,还可以用js原生的方法:window.location.reload()

此方法存在bug , 一旦在组件中使用此方法,会重载整个实例 , 刷新页面 ,  keep-alive  失效 

 

48. 组件复用, 参数变化, 组件响应参数变化重新渲染

原因 : 组件只创建了一次 , 数据变了 , 视图没变

 

方案一

如果是刷新某个子组件,则可以通过v-if指令实现。我们知道,当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。

例子:

组件 加上   v-if="isRouterAlive"   

<template>  
    <div id="detail" v-if="isRouterAlive">
    </div>
</template>

 提取至 mixin.js中 , 哪里需要直接引入mixin.js    的   componentLoad   调用   this.reload()   即可

export const componentLoad = {
    data() {
        return {
            isRouterAlive: true,
        }
    },
    methods: {
        reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => (this.isRouterAlive = true));
        },
    },
}

路由变化且组件复用时执行

beforeRouteUpdate(to, from, next) {
    if (to.path.indexOf("detail") == 1) {  
      this.getDate(); //更新数据
      this.reload(); //刷新页面
    }
    next();
  },

方案二

在App.vue里面,声明reload方法,然后通过provide把reload方法注入,使用布尔值控制router-view隐藏(销毁),再通过this.$nextTick()在dom更新之后利用bol控制router-view重新加载,实现页面刷新的效果
例子
App.vue中
<template>
  <div id="app">
    <keep-alive exclude="Detail">
      <router-view v-if="isRouterShow" />
    </keep-alive>
  </div>
</template>
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      isRouterShow: true,
    };
  },
  methods: {
    async reload() {
      this.isRouterShow = false;
      await this.$nextTick();
      this.isRouterShow = true;
    },
  },
  
};

 

子组件

使用inject注入App.vue提供的reload依赖,然后在需要的地方直接调用this.reload()方法即可

export default {
  inject: [\'reload\'],  //注入reload
  methods: () {
      reloadFun () {
          this.reload()  //直接调用即可
      }
  }
 }

 其他方案:

1. 使用 钩子 beforeRouteUpdata(to,from){}

2.   watch: { $route() {}}

 

 

49. async /await 不起作用

1. 瞅一眼 await 后面跟着的是Promise函数么 

 2. 在vue中 , 数据未获取完 ,操作dom ,  用到async/await来解决异步时 , 依然不能完全获取dom , 可以在执行操作dom 之前 加上  await  1 , 可以解决问题

50.

50.防抖函数debounce 在vue中不执行问题

解决文章: https://blog.csdn.net/qq_27626333/article/details/81458824

51.移动端字体与实际设置字体不一致

1.当 viewport 的 initial-scale 为 1时,不会涉及这个问题。

2.下面两个样式选择一个就可以解决问题

p{max-height: 100%} //给元素加一个高度
p{-webkit-text-size-adjust: none;} //禁用Webkit内核浏览器的文字大小调整功能

 

52.  error: GE007: Your push would publish a private email address.

 

解决: 

 

 

...