<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          vue框架開發出現頁面空白、白屏的解決方法總匯

          時間:?2017-12-27閱讀:?28770標簽:?vue

          使用vue開發過一段時間了,采用 Vue-cli腳手架中出現一些頁面空白問題的解決方法總匯


          1.npm run build打包頁面空白

          我們會發現頁面head中引用的js和css文件是出現了路徑錯誤,這里修改如下:

          解決位置:config/index.js文件:把assetsPublicPath: '/'改為assetsPublicPath: './'

          build: {
              assetsPublicPath: './',
          }


          2. iOS的Safari下無法打開網頁

          webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下無法打開網頁,效果為白屏。 

          控制臺報錯:Can't find variable: SockJS 應該是 Safari 的 BUG,比如下面的代碼就會拋出 

          Error eval("const a = function () {}; function b() { a(); }; b();")

          解決方法

          1.使用老版本:

          yarn add webpack-dev-server@~2.7.0 -D

          2.其它方法

          yarn add babel-plugin-transform-es2015-block-scoping -D

          修改 webpack 相關配置

          {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
              ...,
              /node_modules\/webpack-dev-server/
            ]
          }


          3.升級vue2+部分手機訪問出現頁面空白

          npm run dev后可能出現無法加載到路由模板的信息。

          解決位置:config/index.js文件:把 devtool: '#eval-source-map'  改為devtool:'inline-source-map'

          dev: {
             devtool:'inline-source-map',
          }


          4.升級vue2+IP訪問頁面空白

          默認只能通過localhost或者127.0.0.1才能訪問,如果使用本機的Ip地址會出現無法訪問到的情況。

          解決位置:config/index.js文件:把config/index.js中“host” 配置為“0.0.0.0”就可以解決,或者設置為你電腦的IP地址也行:

          dev: {
             host: '192.168.10.122', 
          }


          5.Vue在IE、低版本Android顯示空白問題

          這是由于IE對promise的支持不好,我們需要安裝:babel-polyfill和es6-promise:

          npm install babel-polyfill
          npm install es6-promise

          然后在main.js文件中引用:

          import 'babel-polyfill'
          import Vue from 'vue'
          import Es6Promise from 'es6-promise'
          Es6Promise.polyfill()

          最后 build/webpack.base.conf.js 文件中配置如下:

          module.exports = {
               entry: {
               app: ["babel-polyfill", "./src/main.js"]
               }
          };


          6.Vue只在iOS 10出現白屏問題

          a:出現變量定義兩次的錯誤描述,如下:

          SyntaxError: Cannot declare a let variable twice

          原因是由于ios 10中Safari中錯誤描述如下:當你定義一個與參數同名的for循環迭代變量時,我們錯誤地認為這是一個語法錯誤。解決方法如下:

          找到webpack.prod.conf.js文件,在UglifyPlugin的定義里添加關于mangle的選項

          new UglifyJsPlugin({
                uglifyOptions: {
                  compress: {
                    warnings: false
                  },
                  mangle: {
                    safari10: true
                  }
                },
                sourceMap: config.build.productionSourceMap,
                parallel: true
          }),

          b:使用Swiper插件:這是由于Swiper插件中用到了ES6的語法a = b ** c,a是b的c次方,而iOS 10的Safari里不認識這樣的語法,認為這是一個錯誤,所以你需要讓Swiper經過babel的包裝,而缺省狀態下babel是不對node_modules里的模塊進行編譯的。解決方法是在項目根目錄下新建一個文件vue.config.js,在里面添加如下語句:

          module.exports = {
            chainWebpack: config => {
              config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
            }
          }


          總結

          vue中出現空白頁面的情況大概也就就上面這些了,如何遇到其他情況,歡迎留言討論總結。

          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/287

          Vue 的 .sync 修飾符

          .sync 修飾符算是 Vue 的所有修飾符中較難理解的一個,本篇文章就帶你走近 .sync 的世界,深入理解后會發現,其實也就那么回事。修飾符和指令息息相關,下面從 指令 -> 修飾符 -> .sync 修飾符 由淺入深地來講解 .sync 的含義及用法。

          vue中is的作用和用法

          總所周知,ul里面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。my-component是我們自己寫的組件,但是html在渲染dom的時候,my-component對ul來說并不是有效的dom,甚至會報錯。

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          Vue最佳實踐

          Vue 最佳實踐,是參考 Vue 官方風格指南并根據過去 Vue 實際項目開發中的經驗總結的一套規范建議。本項目的目的是希望每個 Vue 開發者都能盡快熟悉并上手項目代碼,志在幫助 Vue 新手開發者及時避免一些不規范的設計和由此而引發的問題

          vue知識點總匯

          keep-alive它是vue的內置組件在默認情況下,v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 。你可以添加 lazy 修飾符,從而轉變為使用 change 事件進行同步:

          vue中使用v-for時為什么不能用index作為key?

          Vue 和 React 都實現了一套虛擬DOM,使我們可以不直接操作DOM元素,只操作數據便可以重新渲染頁面。而隱藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虛擬DOM的Diff算法大致相同,其核心是基于兩個簡單的假設

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网