vue中用cdn引入优化vender.js大小,和cdn 引入mint-ui的问题

 
   
下面是常用的cdn链接
    <link rel="stylesheet" href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css">
    <script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
然后再build-webpack.base.conf.js中加入如下代码
externals:{
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'vuex':'Vuex',
  'vue-resource':'VueResource',
  'jquery':'$',
  'mint-ui': 'MINT',
},

左边名字是固定的,是你从script引入的名字,右边是你页面中使用的名字,externals的意思就相当于引入并use的意思了,然后就可以在页面中把你npm使用到的注释掉如下

router中的index.js
// import Vue from 'vue'
// import Router from 'vue-router'

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'index',
      meta: {
        title:"会员",
      },
      component:resolve => require(['@/components/park/index'],resolve)
    },
  ],
  scrollBehavior (to, from, savedPosition) {//就是在每次新进入一个页面时,都是从0,0处显示页面
    return { x: 0, y: 0 }
  }
})







main.js中的
// import Vue from 'vue'
// import $ from 'jquery'
// import Mint from 'mint-ui';
// Vue.use(Mint);
// import 'mint-ui/lib/style.css';
// import Vuex from 'vuex'
//引用resource
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

store中的store.js中
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)


注释掉

 
  import {publicPath,testPath,imgPath} from "../../assets/js/common";
//  import { Indicator } from 'mint-ui';
  export default {
    name: "coupon",
    data:function(){
      return{
     
        buttonText:"确认",
        usePoints:"",//积分数
      }
    },

,改成以下形式
 this.$indicator.open({//调用上传中弹窗
        text: '加载中...',
        spinnerType: 'fading-circle'
      });

  this.$indicator.close();//关闭加载中的方法


这样才会生效
以上通过cdn引入,vender.js的体积已经很小了,首页加载页很快
 祝工作顺利,身体健康

猜你喜欢

转载自blog.csdn.net/dakache11/article/details/85992229