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

本文内容纲要：

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

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

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

- 6.webpack 代理

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

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

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

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

- 

- 9.npm install 报错问题

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

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

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

- 13 .TortoiseGit 128 推送报错

- 14. TortoiseGit 图标不显示

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

- 解决办法：是因为entry需要写成对象形式 ，

- 16 npm登录报错

- 

- 17.webpack4.x img打包报错

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

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

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

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

- 24.webpack html和css热替换 （不刷新页面）

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

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

- 27.git绑定url报错

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

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

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

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

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

- 33.vsCode中使用Live server 注意

- 33.滚动条未显示

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

- 35.swiper无法匀速滚动

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

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

- 38.webpack postcss-loader 加载plugins报错

- 39.webpack模块加载报错

- 40.webpack entry入口可能错了

- 41.vscode中 使用 yarn 报错

- 

- 41.win+D无效

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

- 43. position:fixed失效问题

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

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

- 46.position: sticky失效

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

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

- 

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

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

- 49. async /await 不起作用

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

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

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

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

解决如下问题：

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

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 图标不显示

正常情况应如下图:

解决办法:

ctrl + r 输入 regedit 然后注册表就打开了
依照路径: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers
找到 Tortoise 相关的文件夹 ,然后将文件夹名字加上空格 , 空格加的最多, 最靠前
然后按下 F5 刷新 , 就可以看到加完空格的排序情况了

如下图:

Ctrl + Alt + Del 打开资源管理器 , 然后将文件管理器关掉
在打开没有显示的文件所在文件夹瞅瞅 , 应该是大功告成了

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,
}

只热刷新一次

解决方法:

导入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切换后的轮播问题

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

observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swiper
加上以上两个属性后 , 在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-content: space-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 报错

解决办法:

先关闭vscode
鼠标右键 , 管理员身份运行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.前往https://github.com/HBLong/channel_v3_daily下载channel_v3.json文件到本地计算机。
2.点击Sublime菜单栏上点击 Preferences > Package Settings > Package Control > Settings - User
3.添加 “channels”: [“c:/sublime/channel_v3.json”]，其中括号内为自己刚下载保存的channel_v3.json文件绝对路径。

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

46.position: sticky失效

解决方案 :

所有父元素中不能overflow:hidden或者overflow:auto属性
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于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"

<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()  //直接调用即可
      }
  }
 }

其他方案:

使用钩子 beforeRouteUpdata(to,from){}
watch: { $route() {}}

49. async /await 不起作用

瞅一眼 await 后面跟着的是Promise函数么
在vue中 , 数据未获取完 ,操作dom , 用到async/await来解决异步时 , 依然不能完全获取dom , 可以在执行操作dom 之前加上 await 1 , 可以解决问题

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

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

vue优化相关---性能篇

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.

解决:

...

本文内容总结：2. vue解决页面不会重新渲染问题，4.webpack4加载'style-loader',模块加载失败问题:，5. webpack4.x 解决打包后css背景图片路径错误问题，6.webpack 代理，7.webpack4.x 打包html文件中图片路径无法被正常解析，esModule: false 必须加上,否则html中的img src 会解析错误，8. webpack4.x css-loder解析文件报错，曲线救国解决方案：重新配置node_modules文件及package.json，，9.npm install 报错问题，10 .webpack4.x中常规错误：单词拼写报错，11.Vue父组件向子组件传递一个动态的值，子组件只能获取初始值，不能实时更新？，12.jquery设置 animate方法 scrollLeft属性出现了滚动闪烁无法滚动的问题，13 .TortoiseGit 128 推送报错，14. TortoiseGit 图标不显示，15.webpack4.x 中设置new HtmlWebPackPlugin()中的chunks属性，并未加载对应的js文件，解决办法：是因为entry需要写成对象形式，，16 npm登录报错，，17.webpack4.x img打包报错，20.vue-devtools 插件安装后 F12 没有vue选项，21.使用swiper插件内容div莫名被撑大，22.iphone不渲染渐变色字体不显示问题，23. 移动端监听 touchmove 事件，拖拽时 e.changedTouches[0].pageX 和元素初始位置混乱，24.webpack html和css热替换（不刷新页面），25.点击返回，如果有上一页则返回，26.swiper 在tab切换后的轮播问题，27.git绑定url报错，28.git 提交账号名和密码错误时，29.弹性盒子中元素溢出问题，30.IOS上html,body添加overflow:hidden会导致手机端上下滑动卡顿。，31.firebox 页面切板 , 图片之间出现白线问题，32.element 自定义表头v-slot 作用域插槽提示报错，33.vsCode中使用Live server 注意，33.滚动条未显示，34.ios移动端动画定位问题，35.swiper无法匀速滚动，36.ios移动端点击没触发点击事件，37.webpack autoprefixer给css添加前缀 , 并没有添加且不报错，38.webpack postcss-loader 加载plugins报错，39.webpack模块加载报错，40.webpack entry入口可能错了，41.vscode中使用 yarn 报错，，41.win+D无效，42.QQ消息默认浏览器ie更改，43. position:fixed失效问题，44.git bash使用vue-cli创建项目无法切换选项，45.Sublime Text 无法使用Package Control的解决方法，46.position: sticky失效，46.webpack 安装image-webpack-loader@4.6.0 报错 ‼ getaddrinfo ENOENT raw.githubusercontent.com raw.githubusercontent.com:443，46.vue 组件未渲染标签显示传递数据为 [object Object],[object Object],[object Object]，，47. Vue项目中刷新当前页面，48. 组件复用, 参数变化, 组件响应参数变化重新渲染，49. async /await 不起作用，50.防抖函数debounce 在vue中不执行问题，51.移动端字体与实际设置字体不一致，52. error: GE007: Your push would publish a private email address.，

原文链接：https://www.cnblogs.com/wxyblog/p/11890678.html

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

本文内容纲要：

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

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

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

6.webpack 代理

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

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

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

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

9.npm install 报错问题

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

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

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

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

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

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

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

13 .TortoiseGit 128 推送报错

14. TortoiseGit 图标不显示

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

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

16 npm登录报错

17.webpack4.x img打包报错

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

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

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

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

24.webpack html和css热替换 （不刷新页面）

现象 1:

现象2:

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

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

27.git绑定url报错

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

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

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

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

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

33.vsCode中使用Live server 注意

33.滚动条未显示

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

35.swiper无法匀速滚动

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

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

38.webpack postcss-loader 加载plugins报错

39.webpack模块加载报错

40.webpack entry入口可能错了

41.vscode中 使用 yarn 报错

41.win+D无效

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

43. position:fixed失效问题

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

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

46.position: sticky失效

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

解决办法:

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

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

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

49. async /await 不起作用

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

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

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

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

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

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

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

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

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

24.webpack html和css热替换（不刷新页面）

41.vscode中使用 yarn 报错

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