美文网首页vue相关知识
Vue2集成第三方插件 兼容IE9等经验

Vue2集成第三方插件 兼容IE9等经验

作者: 咸鱼plus | 来源:发表于2017-10-23 14:17 被阅读17次
    自从开始用vue写项目后,前前后后也确实遇到不少问题,踩过不少坑,主要的一些问题总结一下:

    1.如果同时运行多个vue项目,就会造成端口冲突,修改vue项目的端口就可解决

    在项目的根目录下 config文件夹下index.js文件中,修改dev的port值就可以了,默认的是8086,修改成自己想要的端口好就可以了。

    2.编译打包的问题

    在项目的根目录下 build文件夹下webpack.base.conf.js文件中,module.exports对象下有output对象
    
    output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath:
            process.env.NODE_ENV === 'production'
             ? config.build.assetsPublicPath
             : config.dev.assetsPublicPath
    
      }
    
    

    改为:

    
          output: {
              path: config.build.assetsRoot,
              filename: '[name].js',
              publicPath:
                 './'
                  /*process.env.NODE_ENV === 'production'
                   ? config.build.assetsPublicPath
                   : config.dev.assetsPublicPath*/
    
          }
    
    
    在这个状态下npm run biuld 打包编译就可以了。如果自己不想来回的切换publicPath值来预览和编译文件,可以在npm run dev的情况下,另开一个终端,把publicPath 改为编译状态,这个时候npm run build 编译,不会影响之前 npm run build 终端的运行状态的。

    3.兼容IE9,虽说官方文档说明vue支持ie9,但是需要我们自己再去处理才可以在ie9中打开vue项目

    
          1.安装npm包
          npm install --save-dev -polyfill
    
          2.修改webpack.base.conf.js  
            module.exorts={
            entry: {
                   app: './src/main.js'
                   }
            改为: entry: {
                'babel-polyfill': 'babel-polyfill',
                app: './src/main.js'
                  }
    
    
    
    这样编译后的文件就可以在IE9中打开了。但是有时你会发现,还是打不开,在打开控制台的情况下,在刷新就会出现页面了,对于这个问题是ie的控制台脚本保护机制,我们需要重新定义console.log就可以了,在index.html中加上:
    
        if(!window.console){
          window.console={
            log:function(msg){},
            err:function(msg){}
          }
        }    
    
    
    想要在360中默认用极速内核打开网站可以在index.html中添加meta表签:
      <meta name="renderer" content="webkit">
    
    

    4.vue集成jquery zepeto bootstrap等

    对于juery的引入有另种方法
    
          一 .直接在main.js引入jquery.js文件
    
          二, webpack引入
          1.修改build文件夹下面的webpack.base.conf.js文件
            在头部加入:
              var webpack = require('webpack')
            然后在
            module.exports = {
            entry: {
              app: './src/main.js'
            },
            后面加
            plugins: [
              new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
              })
            ]
          2. 在入口文件main.js中加入 import $ from 'jquery'
    
    
    引入bootstrap
    
        1、修改webpack.base.conf.js文件:
           alias: {  
                 'vue$': 'vue/dist/vue.esm.js',  
                 '@': resolve('src'),  
                 'assets': path.resolve(__dirname, '../src/assets'),  
                 'jquery': "jquery/src/jquery"  
           }  
        2、在入口文件main.js中加入:
    
           import './assets/css/bootstrap.min.css'  
           import './assets/js/bootstrap.min'  
    
        3、在assets文件目录中拷贝bootstrap各种文件
        cs  js font文件s等
    
    

    5. 在引入组件的时候,如果组件中有数据的功能,在刷行的时候不会执行,故在传入组件前,就需要把待处理的数据处理好。

    相关文章

      网友评论

        本文标题:Vue2集成第三方插件 兼容IE9等经验

        本文链接:https://www.haomeiwen.com/subject/hchauxtx.html