vue項目在ie下空白

1.查看瀏覽器的報錯，如果有html的錯誤，按照錯誤提示修改一下。

 

 

 

2.如果報的錯誤為下面圖片的錯誤，應該就是es6的語法沒有轉為es5，瀏覽器識別不了。

 

 

 解決辦法

　　安裝: npm instatll babel-polyfill -save / yarn add babel-polyfill

　　main.js最頂部引入 import 'babel-polyfill'

　　找到webpack的入口文件，vue-cli創建的目錄build/webpack.base.conf.js

　　entry: {

　　　　app: './src/main.js'

　　}

　　改為如圖

　　

 

 

 

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
     resolve('node_modules/vue-echarts'),  //如果使用了這個組件添加上去，沒使用可以不放
     resolve('node_modules/resize-detector')
   ]
},

　　配置.babelrc文件

　　根目錄下創建.babelrc文件

{
    // 此項指明，轉碼的規則
    "presets": [
        // env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，並且設置amd,commonjs這樣的模塊化文件，不進行轉碼
        ["env", { "modules": false }],
        // 下面這個是不同階段出現的es語法，包含不同的轉碼插件
        "stage-2"
    ],
    // 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
    "plugins": ["transform-runtime"],
    // 下面指的是在生成的文件中，不產生注釋
    "comments": false,
    // 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
    "env": {
        // test 是提前設置的環境變量，如果沒有設置BABEL_ENV則使用NODE_ENV，如果都沒有設置默認就是development
        "test": {
            "presets": ["env", "stage-2"],
            // instanbul是一個用來測試轉碼后代碼的工具
            "plugins": ["istanbul"]
        }
    }
}

　　打包運行可以測試了