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

自从开始用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. 在引入组件的时候，如果组件中有数据的功能，在刷行的时候不会执行，故在传入组件前，就需要把待处理的数据处理好。