vue問題總結

一、經過判斷綁定class及點擊事件總結
<a :class='[item.status=="yes" ? `btn-primary` : `btn-danger`]' :title="item.status=='yes' ?'取消' :'監測'" @click="item.status=='yes' ?seeManage(item.id,'delete') :seeManage(item.id,'on')">
 :class="{'active': navId === 0}"
 :class="['tab col-sm-4',tab.num2 ? 'current':'disabled']"
　　　　<div :class="[{'cbp-spmenu-push-toright':nav.left},'main-content cbp-spmenu-push']">
<div :class="['collapse navbar-collapse',{'in': nav.inMenu}]">
<router-link  tag="li" to="/site" v-show="navId == 1"></router-link>
<button id="showLeftPush" class="{active:nav.left}" @click="nav.left = !nav.left"></button>

多個vue頁面引用公用js   detect.js
import detect from '@/detect'
export default {
  name : 'automation',
  mixins: [detect]
}

在頁面中改變vuex中的userInfo的值
this.$store.state.userInfo = {}

 經過v-if顯示隱藏模塊時，若是模塊中有相同的組件或元素，應給外層容器添加不一樣的key值或者給全部相同的組件添加不一樣的key值，key值不一樣，模塊下相同的組件之間也是相對獨立的，不會複用

 路由配置  mode: 'history' 不兼容IE9  默認添加#及基路由  解決方法 添加  fallback:false，以下：

let router = new Router({
  'linkActiveClass': 'active',
  routes: routes,
  base: '/',
  mode: 'history',
  fallback:false
})

解決360兼容模式時，提示瀏覽器版本太低問題

 <!--[if lte IE 8]><script>window.location.href='/version/index.html'</script><![endif]-->
  <script>
    let ms_ie = false;
    let ua = window.navigator.userAgent.toLowerCase();
    let old_ie = ua.indexOf('MSIE');
    let new_ie = ua.indexOf('trident/');
    let is360 = false;
    let append = document.getElementById("append");
    if((old_ie > -1) || (new_ie > -1)) {
      ms_ie = true;
    }
    if(window.navigator.appName.indexOf("Microsoft") != -1) {
      me_ie = true;
    }
    if((window.navigator.mimeTypes[40] || !window.navigator.mimeTypes.length)) {
      is360 = true;
    }
    if(ms_ie) {
      let DEFAULT_VERSION = 8.0;
      let ua = navigator.userAgent.toLowerCase();
      let isIE = ua.indexOf("msie")>-1;
      let safariVersion;
      if(isIE){
        safariVersion =  ua.match(/msie ([\d.]+)/)[1];
      }
      if(safariVersion <= DEFAULT_VERSION ){
        window.location.href='/version/index.html'
      }
    }
  </script>

 vue多項目時，解決不一樣項目引入不一樣的ico圖標問題

     （在每一個項目下建立static文件夾並配置（dev 及 conf文件均需配置））

 new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/jiance/index.html',
      chunks: ['jiance'],
      inject: true,
     /* favicon:'src/jiance/static/vision_favicon.ico'*/
      favicon: path.resolve('src/jiance/static/vision_favicon.ico')
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/jiance/static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

項目上線後 隱藏掉組件中的代碼，只顯示打包後的代碼，配置方法：config/index.js    

productionSourceMap: true,改成false便可