vue在ie9中的兼容问题

2018-6-28    seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

问题总结  https://github.com/vuejs-templates/webpack/issues/260

  1. 首先npm install --save babel-polyfill

  2. 然后在main.js中的最前面引入babel-polyfill

    import 'babel-polyfill'

  3. 在index.html 加入以下代码（非必须）

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  4. 在config中的webpack.base.conf.js中,修改编译配置 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    entry:{
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    app:['babel-polyfill','./src/main.js'] 
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    }
                
    

            
    

        
    4.

当然，如果你只用到了 axios 对 promise进行兼容，可以只用 es6-promise 

npm install es6-promise --save

在 main.js 中的最前面 引入 

import 'es6-promise/auto'
  • 以上配置，ie9兼容就完成了

那么，就有一个问题了，build之后的dist文件只有放在服务器上才能查看，但本地如何查看呢，参考一下配置

  1. 修改config文件夹中的index.js文件,将build对象中的打包路径，'/‘改为'./'，由绝对路径改为相对路径,建议将sourceMap改为false,编译的时候会快一点

    build: { assetsPublicPath: './', productionSourceMap: false, },

  2. 修改完之后，重新 npm run build ，得到新的dist文件夹

  3. 然后进入dist文件夹

    cd dist

  4. 全局安装简易node服务器

    npm install http-server -g

  5. 启动简易node服务器

    http-server

  6. 出现如下图所示，就代表你的服务器启动成功了，那你也能在5000端口查看编译打包后的项目了，可以在ie浏览器中直接测试了

    这里写图片描述

  7. IE在处理日期的时候，不支持-支持/的日期方式 如 2017-01-01应该 


蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务


« UI按钮设计发展史 各家UI时代一览 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档