1. 程式人生 > >vue-cli構建的移動端專案ios9以下開啟頁面空白問題

vue-cli構建的移動端專案ios9以下開啟頁面空白問題

造成ios9一下頁面空白問題,個人遇到的是專案npm run build之後,專案裡es6沒有轉成es5造成的。

vue-cli構建的本身已經配置好babel,es6的轉碼,但是還遇到這個問題。

那麼可能的原因是引入的檔案沒有轉碼,像我個人把http.js寫在了static/js/http.js裡了。 在static這個資料夾下。專案編譯這個檔案本身不打包。所有寫在這裡的es6沒有轉成es5.

所有要把js檔案移入src下的assets,或者自建的資料夾

ios9以下頁面空白如果是其他方面引起的可以考慮在pc端IE瀏覽器的Edge除錯。把錯誤都排除了,能夠頁面顯示出來,那麼基本就成功了。

IE會報vuex requires a Promise polyfill in this browser這個錯誤,成這種現象的原因歸根究底就是瀏覽器對ES6中的promise無法支援,因此需要通過引入babel-polyfill來是我們的瀏覽器正常使用es6的功能

解決辦法:安裝babel-polyfill這個依賴 cnpm install –save-dev babel-polyfill

然後在build下的webpack.base.conf.js檔案中,使用

const webpackConfig  = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ["babel-polyfill", "./src/main.js"]
  }

相關推薦

vue-cli構建移動專案ios9以下開啟頁面空白問題

造成ios9一下頁面空白問題,個人遇到的是專案npm run build之後,專案裡es6沒有轉成es5造成的。 vue-cli構建的本身已經配置好babel,es6的轉碼,但是還遇到這個問題。 那麼可能的原因是引入的檔案沒有轉碼,像我個人把http.js寫

AntV F2+vue-cli構建移動視覺化檢視

  AntV F2是螞蟻金服旗下的一個專注於移動,開箱即用的視覺化解決方案,完美支援 H5 環境同時相容多種環境(Node, 小程式,Weex),完備的圖形語法理論,滿足你的各種視覺化需求,專業的移動設計指引為你帶來最佳的移動端圖表體驗。   AntV F2官方文件地址:https://antv.alipay

Vue +vux 搭建移動專案

一、使用 vue-cli 搭建Vux專案模板 1、全域性安裝 vue-cli npm install --global vue-cli 2、建立一個基於 webpack 模板的新專案 vue init

vuejs第二篇 vue-cli配置移動自適配(引入flexible)

原文網址 http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 1.

基於vue-cli配置移動自適應

目前移動端應該大都是用rem來做自適應佈局,下面是關於如何基於vue-cli配置的專案做移動端螢幕適配。在命令列中輸入並執行:npm i lib-flexible --save2.在專案入口檔案main.js中引入lib-flexibleimport 'lib-flexibl

vue-cli3.0結合lib-flexible、px2rem實現移動適配,完美解決第三方ui庫樣式變小問題 vue-cli 3.0 搭建專案流程

公司最近做的一個移動端專案從搭框架到前端開發由我獨立完成,以前做移動端適配用的媒體查詢,這次想用點別的適配方案,然後就採用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案,開發過程中也遇到一些坑,自己選的方案自己填坑吧。以下記錄我的專案框架搭建及填坑方案。 搭建可以參考我

vue-cli起的webpack專案 用localhost可以訪問,但是切換到ip就不可以訪問 我用的是vux起的一個專案移動,基於vue的),因為是移動的,需要在手機上測試,發現用

      我用的是vux起的一個專案(移動端,基於vue的),因為是移動端的,需要在手機上測試,發現用http://localhost:8081/訪問的挺好的,但是換到ip就訪問不了,期初我以為是代理的原因,將電腦的代理給關掉了。還是不行,然後改為127.0.0.1訪問,發現可以訪問,用0.0.0.0訪

使用Vue開發移動專案初始化需要

1、增加移動端適配標籤| <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 2、將r

vue-cli構建專案npm run build打包後怎麼在本地檢視效果

這時如果直接執行npn run build是可以執行並打包你的程式碼的,不會報任何異常或錯誤,但是會看到打包完成有這樣一句提示: 打開了控制檯,看到console tab下一片404的各種找不到資源   解決方案 開啟專案資料夾。找到config資料夾裡的index.

vue--使用vue-cli構建專案

webpack是現在較流行的前端自動化工具,該工具可以幫助開發者打包程式碼,以減少需要手動的工作,可以提高開發效率。 vue中提供了一個腳手架工具vue-cli,這個工具已經將webpack配置好了,使用這個工具可以快速地搭建一個標準專案。 一、安裝node 1.在 https://nodejs.org

使用vue-cli 構建專案

1、開啟cmd命令視窗,進入專案目錄,執行 vue init webpack myfirstvue 2、輸入命令後,會跳出幾個選項讓你回答: Project name (myfirstvue): -----專案名稱,直接回車,按照括號中預設名字(注意這裡的名字不能有大寫字母,如

vue-cli構建專案中如何引入json資料檔案?

vue-cli構建的專案中如何引入json資料檔案? 方法1: 1、將json資料檔案放入到static資料夾中,並將static資料夾與專案的index.html檔案置於同一級 2、然後使用axios呼叫該json檔案,呼叫地址為自己電腦ip、埠 + json資料檔案路徑

vue-cli構建專案新增網站ico的logo

1.網上找一個把圖片改成ico格式的網站,把logo改成ico格式,命名favicon.ico 2.將favicon.ico放入static目錄    3.在index.html檔案中引入 <link rel="shortcut icon" type="image/x-icon" href

vue全家桶(一) 使用 vue-cli 構建專案

一.安裝node.js 進入node.js官網 https://nodejs.org/en/download/ ,選擇對應安裝包,版本建議8.0以上。 node.js安裝完了,npm也就安裝完了。 鍵盤按下【win+R】鍵,輸入cmd,然後回車,開啟cm

vue移動專案中使用rem佈局簡易教程

rem佈局由於其根據螢幕寬度的改變修改相應的rem與px的轉換比例,這樣非常適合移動端的專案。 在不同的解析度下,都會有較好的顯示效果。 在使用rem佈局的時候需要引入flexible.js。 js會根據螢幕的寬度計算html的根字型大小 在vue專案中只需要安裝ra

vue-cli構建專案中使用svg圖示

1、安裝外掛: npm i -S svg-sprite-loader 2、更改build/webpack.base.conf.js配置檔案 { test: /\.svg$/, loader: 'sv

vue移動專案,螢幕適配方法,rem

親測有效,大家可以試試。 使用的是vue-cli搭建的webpack專案,然後按步驟一步一步走下去就成功了 1.終端中輸入 npm i lib-flexible --save 2.終端中輸入 npm i px2rem-loader --save-dev 3.在專案

vue-cli構建專案 npm run build打包後怎麼在本地檢視效果

本文以vue官方腳手架vue-cli構建的專案為例。 執行npm run dev以開發模式開啟除錯好了你的案例程式;你還不滿足於僅僅把程式碼放在github上,想把專案打包,然後在本地預覽或者放在個人部落格上供大家直接看效果學習。 這時如果直接執

vue-cli構建專案使用 less

  在vue-cli中構建的專案是可以使用less的,但是檢視package.json可以發現,並沒有less相關的外掛,所以我們需要自行安裝。 第一步:安裝 npm install less less-loader --save-dev 即通過npm安裝less和less-loader,並記錄

使用vue-cli構建專案不檢查分號

使用 vue-cli 構建的專案,模版是 webpack ,預設的 eslint 配置是以 standard 為基礎的,要求是不使用分號。 如果我們希望要使用分號,則在 rules 欄位增加配置