vue项目CDN引入

最新推荐文章于 2024-06-12 11:58:02 发布
最新推荐文章于 2024-06-12 11:58:02 发布
阅读量6.2k 收藏 7
点赞数
分类专栏： 前端 Vue 移动端 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45043019/article/details/117292427
版权
前端 同时被 3 个专栏收录
26 篇文章 3 订阅
订阅专栏
Vue
21 篇文章 0 订阅
订阅专栏
移动端
7 篇文章 0 订阅
订阅专栏

注：一些对系统并不是至关重要的文件诸如字体文件、css重置、js小插件、背景图片等可能适合使用CDN，因为即使CDN文件不可用，网站也能做到平稳退化。

第一步：public/index.html 里⬇️

注:需引入vue并且main.js中正常引入，但element-ui就无需引入，可以直接使用
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> // element-ui的css
  </head>
  <body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> // vue引入，必须放在第一个
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script> // element-ui引入
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> // 百度地图引入，注意替换掉自己的ak
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.1/echarts.common.js"></script> // echarts引入
  </body>
</html>

第二步：vue.config.js中⬇️

module.exports = {
  chainWebpack: config => {
    config.set('externals', {
      vue: 'Vue',
      'element-ui': 'ELEMENT',
      BMap: 'BMap', // 百度地图
      echarts: 'echarts'
      // 'vue-quill-editor': "VueQuillEditor", // 富文本
    })
    return config
  }
}

免费CDN网站，在里面前端大部分插件等都能找到，BootCDN2018年中挂过一次

由本
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue项目引入CDN后出现问题
Monster_ixx的博客
04-05 4336
Vue项目发布后一般都会将本地的依赖包改为用CDN的形式引入，但是引入之后可能会出现各种问题，比如说我就遇到了Cannot read property 'catch' of undefined，这个catch应该是我在每个axios请求后面用以处理错误的捕获函数。在本地没有问题，为什么一用cdn就出现问题了呢？ 稍加分析后我觉得可能是引入的cdn引入的依赖和本地的版本不太一样。 在vue项目文件夹...
vue项目中用cdn优化的方法
08-28
vue项目中用cdn优化的方法 在 Vue 项目中，优化问题是不可忽视的，尤其是首屏优化更是重中之重。为了提高页面加载速度和改善用户体验，使用 CDN 优化是一种非常有效的方法。本文将详细介绍如何在 Vue 项目中使用 ...
vue引入cdn Vue 优化Vue引入 cdn vue cdn Vue优化引入CDN vue 项目 CDN优化
半只
03-04 2869
请检查 引入的时候 组件名称是否 是 CDN资源中的别名。那么这个教程不适合！这个只适合Vue版本为。把 需要依赖引入的代码全部去掉了 , 例如。, 一般是在 public 文件夹下。
通过CDN方式引入VUE3
最新发布
weixin_46011719的博客
06-12 341
通过CDN方式引入VUE3的基础使用
Vue项目cdn引入资源和配置
rzrfreedom的博客
03-09 1562
在日常开发过程中，为了减少最后打包出来的体积，我们会用到cdn引入一些比较大的库来解决 就以本项目为例子 还没cdn引入前 cdn引入后 不比不知道，一比吓一跳！ 接下来在index.html中引入需要用的cdn （注意此项目是vue） <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c
vue项目中使用CDN引入
热门推荐
编码世界
10-09 3万+
CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。 目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。 1. 在vue.config.js进行配置 本人对vue、vuex、vue-router、axios、element-ui、echarts进行了cdn引用。（请求e
Vue项目 cdn引入js
sinat_32487535的博客
10-21 2557
只有两步,不需要在对应模块import cdn 来源基本上都是unpkg，也可以到对应的官网查询 在index.html 中加入script标签，如： <scriptsrc="https://unpkg.com/clipboard@2.0.4/dist/clipboard.js"></script> 在weboack.base.conf.js中配置 ...
CDN引入Vue3
qq_39196447的博客
04-25 774
注意：我们打开bootcdn网站，发现会有很多版本的，例如vue.global.prod.js、vue.esm-browser.min.js等。注意几个关键词，其中global是指提供一个全局的Vue属性、esm-browser是可以使用。在html的内引入，好似下面这样，我这边使用了。，因为比较顺眼，主要官网中提供的CDN很容易挂。
vue项目中通过cdn引入资源并配置
jiangjunyuan168的博客
04-19 1万+
概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统，当用户向cdn链接请求资源时，cdn会利用最靠近用户的服务器来给用户返回资源。 作用 使用cdn能实现用户不需要在项目中通过npm下载其他资源（如第三方库），直接通过请求cdn服务器，服务器返回后即可使用，这样就减小了打包时包的大小，项目的首屏加载也能过更快。 引用资源及配置 话不多说，下面对vue项目中常用的资源进行cdn引用及配置（vue、vuex、vue-router、axios、elementUI） 1、引入 可在项目中的index
vue项目优化之CDN引入
qq_43643806的博客
04-12 5054
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。 解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用。 外部的库文件，可以使用CDN资源，或者别的服务器资源等。 下面，以引入vue、vuex、vue-router以及element-ui
vue项目部署优化——引入CDN
weixin_42182548的博客
04-16 2547
引入工程中的js、css文件，编译时都会被打包进dist/js中，浏览器必须在加载完js文件后，才能开始显示首屏，这会导致首屏显示速度降低。 解决办法就是： 将引入外部的js和css文件剥离开，不编译到dist/js中，而是用资源的形式引用，这样浏览器可以使用多个异步的线程去加载dist中的js文件和外部的js文件，达到加速首开的效果； 实践 1.引入免费的CDN 这里推荐今日头条的CDN库字节跳动静态资源公共库 在/public/index.html 项目的入口样式文件 注意引用顺序，例
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
echart+element+vue搭建CDN项目
01-18
在本文中，我们将深入探讨如何使用ECharts、Element UI和Vue.js来构建一个基于CDN的项目。ECharts是一款由百度开发的开源JavaScript图表库，提供了丰富的可视化图表类型；Element UI则是一个流行的Vue.js组件库，它...
在vue项目中引入高德地图及其UI组件的方法
10-18
今天小编就为大家分享一篇在vue项目中引入高德地图及其UI组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue_cdn_test.zip
05-21
2. **CDN引入**：在HTML文件中，通过`<script>`标签引用CDN上的Vue.js库。这种方式可以利用CDN的全球缓存和负载均衡能力，提高用户体验。例如，使用cdnjs.com上的Vue.js： ```html <script src="https://cdn....
(前端)录音功能实现 js-audio-recorder
qq_45043019的博客
11-13 7408
1. 创建 import Recorder from 'js-audio-recorder' const parameter = { sampleBits: 16, // 采样位数，支持 8 或 16，默认是16 sampleRate: 8000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000 numChannels: 1 // 声道，支持 1 或 2， 默认是1 } const recorderEx
前端搭建自己的组件库并发布npm(完整流程)
qq_45043019的博客
12-08 4987
上传 第一步：用脚手架搭建一个新项目 vue create 项目名称 第二步：src同级目录下创建一个packages文件夹并在里面新建两个文件 Button.vue <template> <button class="MyButton"> 我是一个按钮组件 </button> </template> <script> export default { name: 'MyButton', data () {
（前端）前后端“文件流”，上传、接收、下载
qq_45043019的博客
11-10 3233
文件上传（两种） 方法1 -- 表单方式上传 通过input拾取到文件获取file const formData = new FormData() formData.append('file', file) request(`/mark/...`, { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', }, data: formData }) 方法2 -- base64字符串上传 let
Vue3 CDN 引入
08-19
要在你的项目中使用Vue 3，你可以通过CDN引入Vue 3的库。以下是引入Vue 3的步骤： 首先，在你的HTML文件中添加Vue 3的CDN链接： ```html <script src="https://unpkg.com/vue@next"></script> ``` 然后，你就可以在你的JavaScript代码中使用Vue 3了。例如，你可以创建一个Vue实例： ```javascript const app = Vue.createApp({ // 组件选项 }) ``` 请注意，Vue 3的库文件使用了@next标记，这表示你将使用最新版本的Vue 3。如果你想使用特定的版本，可以将链接中的@next替换为对应的版本号。 希望这可以帮助到你！如果有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值