Vue 2.0项目配置CDN服务解决加载慢问题

位置:首页>文章>详情   分类: 教程分享 > Vue.js教程   阅读(4274)   2024-03-16 09:32:17

vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)
 

步骤一 资源引入


vue最外层index.html文件引入资源文
 

<body>
    <div id="app"></div>
 
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.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>
</body>

步骤二 添加配置

 


在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,如下:

 

module.exports = {
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex'
  }


  
【注意】 externals的key:value不要随便修改,暂时理解为 key是npm安装使用的名称,value为组件对外提供的名称不可随意更改(打开组件源码可见)

步骤三 去掉原有的引用


1.main.js  文件中注释掉vue
 

// import Vue from 'vue'

 

 


2.router--> index.js  文件中注释掉 vue和 vue-router:

 

 

// import Vue from 'vue'
// import VueRouter from 'vue-router'

 


3.修改名vue 使用路由配置为以下

 

Vue.use(VueRouter)
标签: vue cdn
地址:https://www.leftso.com/article/514.html

相关阅读

vue打包会把vue相关的组件打包到一个文件vendor.*.js(*是个随机数)步骤一 资源引入vue最外层index.html文件引入资源文&lt;body&gtl;     &lt;di...
vue-router 中 routers 定义写法,讨论 require 的使用与否​首先上 routerindex.jsimport Vue from 'vue'import Router f...
在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,从下面创建的一个空白项目中可以看到:​关于三个文件的说明如下:index.html---主页
vue
Vue v-if判断数组长度 searchResultDataList为vue定义的data里面的变量&lt;li  v-if="Object.keys(searchResultDataLis...
Vue 如何返回上一页(上一个锚点)//...省略 methods:{ goback:function(){ this.$router.go(-1);//...
vue
在初始化完一个vue项目(基于vue-cli 和webpack)之后,我们可以通过 npm run dev来让这个项目跑起来
1.vue项目中创建global.js创建global.js放于main.js同级目录(可自己随意放)export default {   getToken()   {     retur...
vue watch监控对象属性变化watch:{ 'object.attr':function attr(value){ //处理操作 } ...
一、前言Vue 2.x 使用期间,我们会创建众多组件,这里我们将讨论一下各个组件直接的相互通讯问题如何解决
一、如何在vue中使用route跳转页面并传递参数this.$router.push({ path: '/path/to/your',query:{param1:value1,param2:va...