vue项目中通过cdn引入资源并配置

概念

cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统，当用户向cdn链接请求资源时，cdn会利用最靠近用户的服务器来给用户返回资源。

作用

使用cdn能实现用户不需要在项目中通过npm下载其他资源（如第三方库），直接通过请求cdn服务器，服务器返回后即可使用，这样就减小了打包时包的大小，项目的首屏加载也能过更快。

引用资源及配置

话不多说，下面对vue项目中常用的资源进行cdn引用及配置（vue、vuex、vue-router、axios、elementUI）

1、引入
可在项目中的index.html文件 <head/>标签的<title/>标签的下方添加以下代码（需要最新版本的话可以上各个官网上复制）

<head>...<title></title><!--添加以下代码--><script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js" rel="stylesheet" type="text/javascript"></script><link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css"><script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js" rel="stylesheet" type="text/javascript"></script><script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" rel="stylesheet" type="text/javascript"></script><script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js" rel="stylesheet" type="text/javascript"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js" rel="stylesheet" type="text/javascript"></script><head>

2、配置
在webpack.base.conf.js文件中添加以下配置

externals: {'vue': 'Vue','vue-router': 'VueRouter','element-ui': 'ELEMENT','vuex': 'Vuex','axios': 'axios',},

如果是vue-cli3以上版本的话没有webpack.base.conf.js文件的话就在vue.config.js文件中配置：

module.exports ={...configureWebpack: {externals: {// CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入'vue': 'Vue',// 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，// 不去 node_modules 中找，而是去找 全局变量 ELEMENT'element-ui': 'ELEMENT','axios': 'axios','vuex': 'Vuex','vue-router': 'VueRouter',}},
}

3、在main.js文件中去除原来的引用

main.js:

// import Vue from 'vue'
// import router from './router'
// import 'element-ui/lib/theme-chalk/index.css';
// import ElementUI from 'element-ui';
// import Vuex from 'vuex'
// import axios from 'axios'
// Vue.use(Vuex)
// Vue.use(ElementUI);

这样就实现了在vue项目中通过cdn来引入常见的一些资源了。

vue项目中通过cdn引入资源并配置相关推荐

vue项目中按需引入viewUI
viewUI 一.按需引入二.忽略eslint编译器检测和编译检测 1.忽略编译器检测 2.编译器中忽略一.按需引入 npm install babel-plugin-import --save- ...
在vue项目中正确的引入jquery
最近学习vue,习惯性的通过<script>标签引入jquery,写完后报错才想起来,这种方式在vue是不适用的. 1:因为已经安装了vue脚手架,所以需要在webpack中全局引入jqu ...
vue项目中element-ui全局引入按需引入按需引入报错解决
elementUI中文网址: https://element.eleme.cn/#/zh-CN/component/layout 全局引入 1.安装element-ui cnpm install el ...
Vue项目中操作svg文件
Vue项目中使用svg 引入依赖 yarn add svg-sprite-loader -D [可选] yarn add svgo svgo-loader -D 依赖说明: svg-sprite-lo ...
Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下一.首先修改c ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...

vue项目中通过cdn引入资源并配置

概念

作用

引用资源及配置

vue项目中通过cdn引入资源并配置相关推荐

最新文章

热门文章