VUE 项目中引入外部js文件（CND引入）

最新推荐文章于 2024-05-21 14:53:04 发布

原创最新推荐文章于 2024-05-21 14:53:04 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#VUE CDN

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

VUE

1 篇文章

订阅专栏

本文详细介绍如何在VUE项目中引入并使用echarts图表组件，包括在index.html中添加echarts CDN链接，修改webpack配置文件以支持外部引用，以及在具体页面中导入echarts模块的具体步骤。

以VUE项目中引入echarts文件为例：

第一步在VUE项目中找到index.html文件

引入：<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>

第二步在项目找到 build > webpack.base.conf.js

module.exports = {

externals: {

'echarts': 'echarts' （此处为cdn引入的js文件名）

}

第三步在需要用到的文件中引入

import echarts from echarts

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

昙花一现惊梧桐

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue2 使用cdn引入，性能优化之降低app.js的体积

全易

07-08

1083

超简单，就2步

vue显示服务器时间,Vue CLI 项目页面打开时间优化：从16秒到2秒内

weixin_42515101的博客

08-08

1400

Vue CLI 项目页面打开时间优化：从16秒到2秒内这篇文章发布于 2020/11/30，归类于 Vue标签：vue-cli项目页面加载时间太长，npm run build 打包很大，vue vendor.js文件太大，vue项目包体积优化在日常开发中，经常要写一些 demo 来测试一些功能，于是专门新建了一个 github 仓库来管理，方便积累。这次想着把 vue demo 部署到服务器，方便...

参与评论您还未登录，请先登录后发表或查看评论

vue 项目中引用并使用cdn上面的js文件

且听风吟的博客

01-21

2402

项目中，有一份配置数据需要不停地文件更新，之前放在项目中每次更新就要进行发版本，所以就把它放在cdn上，项目中通过cdn地址获取文件，每次需要更新数据时，直接更新cdn上面的文件即可，这样就算多个项目使用这份配置数据也比较方便。 utils.js中封装公共方法： export function queryJumpConfig (path, success, error) { let oScript = document.createElement('script') oScript.src = pa

vue 项目中引用cdn上的静态js文件

且听风吟的博客

12-14

1575

vue 项目中引用cdn上的静态js文件一级目录一级目录

vue组件内部引入外部js文件的方法

11-21

之所以要做这个是因为，在一个组件内部需要引入一个js文件来定位。如果放在index.html，这样每个组件都会有这个js。所以需要在组件内单独引入。第一种操作 Dom引入js： export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第二种使用 createElement 方法： export default

Vue组件中如何引入外部的js文件

前端队长Daotin

03-29

2万+

背景在Vue中，通常我们引入一个js插件都是使用npm方式下载然后import使用的。但是我现在本地有了js文件或者是一个远程js文件链接，我不想使用npm install xxx的方...

vue项目引入外部js文件方法

diaobiaoqi0148的博客

07-09

2795

记录是为了更好的成长！这里只说在vue项目中的引入在vue项目中，也遇到过引入外部js的场景，通常同时在page下建立utils目录，js文件放在里面，页面使用import按需导入；这种做法当前需要用export暴露方法。这点相信都没有问题。但有些场景我们需要引入这种js "https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1...

umi cnd引入

03-26

在 Umi 项目中，可以通过配置 `public` 文件夹或者修改项目的 `umi.ts` 配置文件实现通过 CDN 引入外部资源或依赖。以下是具体的实现方法： #### 方法一：通过 `<script>` 和 `<link>` 标签手动引入可以在 `public...

vue在哪里配置cnd

03-25

在 Vue 项目中配置 CDN 是一种常见的性能优化方式，通过将静态资源托管到第三方服务器上，可以减少本地打包文件的大小并提升加载速度。以下是具体实现方法： #### HTML 文件修改为了利用 CDN 加载外部库（如 Vue ...

vue使用cnd加载的方式

最新发布

11-11

Vue使用CDN加载可以在生产环境打包项目时，将项目依赖的一些第三方包替换成CDN方式外部加载，从而提升应用的加载、响应速度。以下是具体方法： ### 配置需要CDN加速的模块在项目中确定需要使用CDN加载的第三方模块...

import-cdn-js:从CDN链接导入JavaScript库

05-17

导入CDN-JS 从CDN链接导入JavaScript库安装 $ npm i -s import-cdn-js 用法 ImportCDNJS（链接：字符串，库名：字符串）：承诺 import ImportCDNJS from 'import-cdn-js' ; ImportCDNJS ( '//cdn.bootcss.com/jquery/3.3.1/jquery.min.js' , '$' ) . then ( $ => $ ( 'body' ) . text ( "Hello world!" ) ) ;

Vue.js快速入门 (cdn引入)

qq15035899256的博客

05-14

1万+

本文是对Vue的学习，重点帮助大伙完成从早期基于Dom开发，到Vue中基于数据开发的编程思路转换，除了Vue的基础语法之外，还包含了网络请求库axios的基本使用，中间穿插着5个精心设计的案例。之后的学习内容将持续更新！！！

vue引入外部js（cdn）文件

BigOrange的博客

08-30

5096

需求背景：在项目中，希望引入阿里播放器插件。实现： index.html: <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"></script> main.js: const Alipla...

Vue基础01-CDN引用vue.js

清晨的博客

05-21

883

区别：1.vue.js没有经过压缩，适合开发测试Debug时使用；2.vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。

vue.js用cdn引入

reg183的专栏

08-19

1010

<!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  <link rel="stylesheet" href="https://unpkg.com/element-

Vue引入CDN JS或本地JS文件之后使用报错

weixin_46607967的博客

07-27

1969

正常情况在public引入script - js文件加载 - 写入内存 - 使用但使用之前有可能这个文件还没执行写入内存或者还未加载完毕此时需要一个promiss解决。

Vue.js用cdn方式引入

热门推荐

Mr_chen的博客

11-29

4万+

Vue.js用cdn方式引入前言注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue 今天博主将为大家分享Vue.js用cdn方式引入！不喜勿喷，如有异议欢迎讨论！有一个强大的地基才能写出健壮的程序！请先阅读博主关于:W...

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

这是一个CDN引入vue.js文件，httpVueLoader引用组件，不用webpack打包实现的vue demo

Crazy_GirlLL的博客

04-13

1466

下载改压缩包，如果使用vscode编辑器，可以安装这个扩展，根据步骤打开就能展示（不能直接点击文件打开，路径不能是file://，需要是类似：http://127.0.0.1:7000/）免费压缩包，提供参考：链接：https://pan.baidu.com/s/1Md_XssZxWl8ubm5RHYuAlg?pwd=nfym 提取码：nfym 安装完扩展之后，可能需要重启vscode，根据情况而定即可然后在index.html文件中，就可以看到如图所示的图标和选项，选择你要打开的浏览器.

怎么在vue文件中引入外部js及jquery文件

06-08

在Vue文件中引入外部JavaScript文件和jQuery文件可以通过以下步骤来完成： 1. 在Vue文件的`<template>`标签中添加需要使用的DOM元素，例如`<div>`、`<input>`等。 2. 在Vue文件的`<script>`标签中使用`import`语句...