var swiper = new Swiper('.swiper-container', {
                pagination: {
                    el: '.swiper-pagination',
                },
                loop: true,
                speed:1000,//勻速時(shí)間
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                pagination:{   //點(diǎn)擊分頁器
                    el: '.swiper-pagination',
                    clickable: true,
                    clickableClass : 'my-pagination-clickable',
                  },
                 on: {  //額外添加，解決移動(dòng)端，最后一個(gè)輪播不顯示，需要點(diǎn)擊后顯示問題
                  slideChangeTransitionEnd: function () {
                    $(window).pullpageImg()
                  },
                }
            });

解決如下問題：

第一張或者最后一張圖片不顯示

2. vue解決頁面不會(huì)重新渲染問題

 this.$forceUpdate(); //強(qiáng)制刷新，解決頁面不會(huì)重新渲染的問題

3.移動(dòng)端 ::after 和 ::before 作為修飾線條 在手機(jī)上不顯示問題

將像素rem改為px 則顯示正常

4.webpack4加載'style-loader',模塊加載失敗問題:

5. webpack4.x 解決打包后css背景圖片路徑錯(cuò)誤問題

第一部分,插件注入

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

第二部分,插件實(shí)例

 plugins: [   //插件集合
     new MiniCssExtractPlugin({  //使用extractTextPlugin插件時(shí)，需要配置publicPath: "../", 不配置時(shí)css文件中背景圖默認(rèn)地址會(huì)在css文件夾下查找圖片資源，導(dǎo)致項(xiàng)目圖片路徑不正確
            filename:'css/main.css',  //抽離的css目錄和打包后的名
            //publicPath: '../',         // 注意配置這一部分，根據(jù)目錄結(jié)構(gòu)自由調(diào)整
        }),
]

第三部分,

module: {   //匹配文件進(jìn)行處理
        rules: [       
　　　　　　{
            test: /.css$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader, //將解析的css抽離為main.css文件
                    options: {
                        publicPath: '../' //這個(gè)option必須寫，否則css中圖片路徑可能會(huì)出錯(cuò)
                    }
                },     
                'css-loader',  //必須在'css-loader'下面,添加css前綴,配置同級(jí)目錄下的postcss.config.js文件,進(jìn)行配置
                'postcss-loader'  //css屬性加前綴的插件
            ]
          },
        ]
}

6.webpack 反向代理

devServer:{  //開發(fā)服務(wù)器配置
        port:4000,  //端口更改
        progress:true,  //進(jìn)度條
        contentBase:'./huild',   //指定目錄作為靜態(tài)服務(wù) 
        proxy: {   //反向代理
            '/api': {
                target: 'http://localhost:3001/api',  //// 接口的域名
                changeOrigin: true,// 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
                secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
                pathRewrite: {  //// pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'
                    '^/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中對圖片進(jìn)行打包
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                        limit:1*1024,     //小于多少 將圖片轉(zhuǎn)base64,減少http請求,圖片文件增大三分之一  
                                            //一般用于小圖標(biāo)
                        outputPath:'./img/',   //img文件目錄 ,沒有就自動(dòng)創(chuàng)建
                       // publicPath:'http://www',
                       esModule: false,   //解決HTML中圖片 src無法被解析的問題
                    }
                  }
                ]
 },   

esModule: false 必須加上,否則html中的img src 會(huì)解析錯(cuò)誤

8.webpack4.x css-loder解析文件報(bào)錯(cuò)

曲線救國解決方案：重新配置node_modules文件 及package.json

9.npm install 報(bào)錯(cuò)問題

解決方案：刪除C:Users{賬戶}下的.npmrc文件..

C:UsersAdministrator.npmrc

10 .webpack4.x中常規(guī)錯(cuò)誤： 單詞拼寫報(bào)錯(cuò)

11.Vue父組件向子組件傳遞一個(gè)動(dòng)態(tài)的值，子組件只能獲取初始值，不能實(shí)時(shí)更新？

11-1.watch監(jiān)聽父組件傳過來的值

11-2.對數(shù)據(jù)的處理,在watch中.而不是mounted中

export default {
  components: {},
  data() {
    return {
      str: "",
    };
  },
  props: ["msg"], //接受父組件傳的值
  watch: {                    //通過watch來監(jiān)聽msg
     msg(curInfo, oldInfo) {  //特別注意是監(jiān)聽msg,而不是str
        if (curInfo) {

　　　　　　　　this.str=curInfo;//賦值需要在此處

            console.log(curInfo);  
            this.getPerMsg(curInfo);
        }
    }
  },
  methods: {
      getPerMsg(data) {
          console.log(data)
      }
  },
  mounted() {
    
   
  }
};            

12.jquery設(shè)置animate方法scrollLeft屬性 出現(xiàn)了滾動(dòng)閃爍無法滾動(dòng)的問題

起因：jquery設(shè)置 animate方法 scrollLeft屬性 出現(xiàn)了滾動(dòng)閃爍無法滾動(dòng)的問題，發(fā)現(xiàn)是animate重復(fù)執(zhí)行了。

解決辦法：在animate方法前面加入stop()清空 防止重復(fù)執(zhí)行。

container.stop().animate({   //設(shè)置stop()

                                     scrollLeft:itemOffsetLeft - centerLeft
                                 })

13 .TortoiseGit 128 推送報(bào)錯(cuò)

14. TortoiseGit 圖標(biāo)不顯示

正常情況應(yīng)如下圖:

解決辦法:

1. ctrl + r 輸入 regedit 然后注冊表就打開了

2. 依照路徑: HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionExplorerShellIconOverlayIdentifiers

3. 找到Tortoise 相關(guān)的文件夾 ,然后將文件夾名字加上空格 , 空格加的最多, 最靠前

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

如下圖:

5. Ctrl + Alt + Del 打開資源管理器 , 然后將文件管理器關(guān)掉

6. 在打開沒有顯示的文件所在文件夾瞅瞅 , 應(yīng)該是大功告成了

15.webpack4.x 中設(shè)置newHtmlWebPackPlugin()中的chunks屬性，并未加載對應(yīng)的js文件

圖2

解決辦法：是因?yàn)閑ntry需要寫成對象形式 ，

16 npm登錄報(bào)錯(cuò)

17.webpack4.x img打包報(bào)錯(cuò)

問題原因：img-webpack-loader版本問題導(dǎo)致，建議版本4.6.0

18.vue啟動(dòng)報(bào)錯(cuò)

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嵌套路由 點(diǎn)擊后地址欄無反應(yīng)

解決辦法：將 beforeRouteUpdate(){}, 注釋去除

20.vue-devtools 插件安裝后 F12沒有vue選項(xiàng)

原因之一：vue.js為壓縮版 (vue.min.js)

解決方案：將文件換為開發(fā)版 (vue.min.js）

21.使用swiper插件內(nèi)容div莫名被撐大

父級(jí)為flex盒子的子集，沒有固定的寬導(dǎo)致

浮動(dòng)，絕對定位 都會(huì)造成此影響

swiper-container或者父級(jí)的寬必須為固定值

22.iphone不渲染漸變色字體不顯示問題

加上前綴依然不顯示

原因：background為簡寫所以不渲染頁面，必須寫為background-imag

23. 移動(dòng)端監(jiān)聽touchmove 事件，拖拽時(shí) e.changedTouches[0].pageX 和元素初始位置混亂

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

24.webpack html和css熱替換 （不刷新頁面）

方案一 :

hotOnly:true,

hot:true

現(xiàn)象 1:

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

方法二: 在入口文件中 :

　　css文件和html 文件可以用requier()的方式導(dǎo)入

方法三:用import 導(dǎo)入

ES6和ES7 語法解析相關(guān)依賴
　　　　babel-loader@8.1.0 @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime @babel/preset-env

webpack.config.js中相關(guān)配置:

 module: {
        rules: [
            {
                test: /.js$/, //匹配所以js文件
                use: [{
                    loader: 'babel-loader?cacheDirectory', //開啟轉(zhuǎn)換結(jié)果緩存
                    options: { //將es6轉(zhuǎn)為es5
                        presets: [
                            '@babel/preset-env', //babel-loader調(diào)用@babel/preset-env核心模塊對es6進(jìn)行處理為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異步函數(shù)generator函數(shù)      測試:只會(huì)對index.js進(jìn)行解析                                  
                        ]
                    }
                }],
                exclude: /node_modules/, //匹配js文件中,排除node_modules文件夾目錄下的js文件
                include: path.resolve(__dirname, '/src/js'), //到src文件夾下找js文件
            },
        ]
    }

現(xiàn)象2:

方案四:

設(shè)置　　

devServer{
　　hot:true,
}

只熱刷新一次

解決方法:

1. 導(dǎo)入webpack模塊

let webpack = require('webpack') //引入webpack模塊

2.加載熱更新插件

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

3.去除devServer 中的hot , 如果 package.json中 設(shè)置了 --hot , 也將其去除

25.點(diǎn)擊返回，如果有上一頁則返回

<script type=”text/javascript”>

function goback()

{

  document.referrer === '' ?
          window.location. :
          window.history.go(-1);
}

</script>

26.swiper 在tab切換后的輪播問題

1. 在swiper配置對象中添加這兩個(gè)屬性 , 可以解決 當(dāng)swiper插件遇到tab切換，即display的顯示與否屬性時(shí)失效的問題 .

observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper

2. 加上以上兩個(gè)屬性后 , 在tab切換后 , 輪播可以滑動(dòng) , 但不會(huì)自動(dòng)輪播 , 必須滑動(dòng)之后才開始自動(dòng)輪播的問題
解決方案: 需要在點(diǎn)擊tab中 重新 new Swiper(節(jié)點(diǎn) , { 配置的屬性 })

27.git綁定url報(bào)錯(cuò)

輸入命令 刪除后，再次執(zhí)行添加就可以了。

　　1. git remote rm origin

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

28.git提交賬號(hào)名和密碼錯(cuò)誤時(shí)

清空原有的賬號(hào)和密碼

　　git credential-manager uninstall

29.彈性盒子中元素溢出問題

問題描述:
100%時(shí) , 無論自己是否有寬度 都會(huì)存在元素溢出問題
解決方案:原因是justify-content:space-around; 的問題造成的, 需要改為space-between; 或者直接去除justify-content

30.IOS上html,body添加overflow:hidden會(huì)導(dǎo)致手機(jī)端上下滑動(dòng)卡頓。

解決辦法：加上overflow:hidden之后，再加上-webkit-overflow-scrolling : touch;

31.firebox 頁面切板 , 圖片之間出現(xiàn)白線問題

解決辦法：

*{ margin:0; padding:0}

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

.big {

font-size:0;
}

32.element 自定義表頭v-slot 作用域插槽提示報(bào)錯(cuò)

原因:這是eslint規(guī)范，定義了沒使用scope

如果去掉自定義表頭就將失效,.

解決辦法:將 v-slot="scope" 改為 slot-scope="{}"

注意: 如果在表單中使用了scope , 則 改為slot-scope="{}" 會(huì)報(bào)錯(cuò)

33.vsCode中使用Live server 注意

33.滾動(dòng)條未顯示

解決方案: 原因所有的父元素中存在overflow:hidden 給上一級(jí)父元素加上height 且上一級(jí)父元素height <存在overflow:hidden的父級(jí)高度

34.ios移動(dòng)端動(dòng)畫定位問題

以上問題 , 將文字圖片或者div同時(shí)加上定位和動(dòng)畫 , 會(huì)出現(xiàn)定位距離不對的問題 ,

解決辦法 :動(dòng)畫條件不能用left top right bottom 屬性來做 ,將在圖片父級(jí)加上定位 ,在圖片上用margin來代替left top right bottom

@keyframes block{
　　0% {
    　　margin-top: 0;/*用margin來代替top , 問題解決*/
　　}
　　100% {
    　　margin-top: 100%;
　　}

}

35.swiper無法勻速滾動(dòng)

 var mySwiper2 = new Swiper('.swiper-container', {
     direction: 'vertical', //向上
     speed: 2500, //勻速時(shí)間
     autoplay: {
         delay: 0, //必須設(shè)為0
         stopOnLastSlide: false,
         disableOnInteraction: false, //手指劃過后繼續(xù)輪播
     },
     loop: true,
     freeMode: true,
     slidesPerView: 5, //默認(rèn)顯示數(shù)量
     autoplayDisableOnInteraction: false,
     spaceBetween: 5, //slide之間的margin
 });

swiper 僅僅參數(shù)設(shè)置 , 不能勻速滾動(dòng)

解決辦法: 加入如下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移動(dòng)端點(diǎn)擊沒觸發(fā)點(diǎn)擊事件

需要給被點(diǎn)擊元素加上

cursor: pointer;

37.webpack autoprefixer給css添加前綴 , 并沒有添加且不報(bào)錯(cuò)

未解決問題前的配置

 {
                test: /.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader, //將解析的css抽離為main.css文件
                        options: {
                            publicPath: '../' //這個(gè)option必須寫，否則css中圖片路徑可能會(huì)出錯(cuò)
                        }
                    },
                    'css-loader', //必須在'css-loader'下面,添加css前綴,配置同級(jí)目錄下的postcss.config.js文件,進(jìn)行配置
                    'postcss-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer'),
                                //require('cssnano'),<= 需去掉，因?yàn)闀?huì)去掉注釋
                                require('postcss-px2rem')({
                                    remUnit: 50,
                                    remPrecision: 2 //精確到多少為小數(shù)點(diǎn)后位
                                })
                            ],
                        }
                    }
                ]
            },

postcss.config.js 文件配置

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

如何解決

方法一:

根目錄下加入 .browserslistrc 文件 內(nèi)容部分

文件內(nèi)容

> 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: '../' //這個(gè)option必須寫，否則css中圖片路徑可能會(huì)出錯(cuò)
                        }
                    },
                    'css-loader', //必須在'css-loader'下面,添加css前綴,配置同級(jí)目錄下的postcss.config.js文件,進(jìn)行配置
                    'postcss-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                //require('cssnano'),<= 需去掉，因?yàn)闀?huì)去掉注釋
                                require('postcss-px2rem')({
                                    remUnit: 50,
                                    remPrecision: 2 //精確到多少為小數(shù)點(diǎn)后位
                                }),
                                require('autoprefixer')({
                                    browsers: [
                                        'last 10 Chrome versions',
                                        'last 5 Firefox versions',
                                        'Safari >= 6',
                                        'ie> 8'
                                    ]
                                })
                            ],
                        }
                    }
                ]
            },

38.webpack postcss-loader 加載plugins報(bào)錯(cuò)

注意:autoprefixer 和postcss-loader 版本問題 , 也會(huì)報(bào)錯(cuò)

個(gè)人使用版本可供參考:

webpack@4.43.0
webpack-cli@3.3.11

postcss-loader@3.0.0

autoprefixer@8.0.0

39.webpack模塊加載報(bào)錯(cuò)

40.webpackentry入口可能錯(cuò)了

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

解決辦法: 修改為正確的入庫

41.vscode中 使用 yarn 報(bào)錯(cuò)

解決辦法:

1. 先關(guān)閉vscode

2. 鼠標(biāo)右鍵 , 管理員身份運(yùn)行vscode

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

　　顯示 Restricted 說明被禁止了

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

　　再次輸入get-ExecutionPolicy

　　顯示RemoteSigned 說明問題已經(jīng)解決了

41.win+D無效

解決辦法: win+R 運(yùn)行 regsvr32 /n /i:u shell32 然后重啟

42.QQ消息默認(rèn)瀏覽器ie更改

原因:某些電腦管家將默認(rèn)瀏覽器設(shè)置為ie , 或者是QQ 設(shè)置中 安全設(shè)置 >安全推薦 那塊設(shè)置了默認(rèn)瀏覽器

解決辦法:

1.騰訊管家設(shè)置默認(rèn)瀏覽器

點(diǎn)開騰訊管家>工具箱>瀏覽器保護(hù) >默認(rèn)瀏覽器設(shè)定

2.360衛(wèi)士設(shè)置默認(rèn)瀏覽器

點(diǎn)開360衛(wèi)士>功能大全>我的工具>主頁防護(hù)> 鎖定默認(rèn)瀏覽器

43. position:fixed失效問題

是因?yàn)橛懈讣?jí)css動(dòng)畫屬性中設(shè)置了 perspective和transform-style: preserve-3d;

44.git bash使用vue-cli創(chuàng)建項(xiàng)目無法切換選項(xiàng)

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

關(guān)閉命令窗口 , 重新打開 , 就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文件到本地計(jì)算機(jī)。
2.點(diǎn)擊Sublime菜單欄上點(diǎn)擊Preferences > Package Settings > Package Control > Settings - User
3.添加 “channels”: [“c:/sublime/channel_v3.json”]，其中括號(hào)內(nèi)為自己剛下載保存的channel_v3.json文件絕對路徑。

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

46.position: sticky失效

解決方案 :

所有父元素中不能overflow:hidden或者overflow:auto屬性
必須指定top、bottom、left、right4個(gè)值之一，否則只會(huì)處于相對定位
父元素的高度不能低于sticky元素的高度

46.webpack 安裝image-webpack-loader@4.6.0 報(bào)錯(cuò)‼ getaddrinfo ENOENT raw.githubusercontent.com raw.githubusercontent.com:443

原因:檢查發(fā)現(xiàn)，是由于近期Github的raw文件讀取地址遭受DNS污染，導(dǎo)致文件下載困難。

解決辦法:

1.打開目錄：C:/Windows/System32/drivers/etc/

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

...

總結(jié)

以上是生活随笔為你收集整理的各种问题汇总解决方法，持续更新中...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。