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()
                  },
                }
            });

解決如下問題：

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

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:UsersAdministrator.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_MACHINESOFTWAREMicrosoftWindowsCurrentVersionExplorerShellIconOverlayIdentifiers

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

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

如下圖:

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

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

15.webpack4.x 中設置newHtmlWebPackPlugin()中的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. :
          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.彈性盒子中元素溢出問題

問題描述:
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.webpackentry入口可能錯了

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失效問題

是因為有父級css動畫屬性中設置了 perspective和transform-style: preserve-3d;

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

...

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。