今天小编给大家分享一下怎么用vue-cli cdn方式引入vue模块的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
一、选择vue的cdn
首先我们引入的vue文件必须是有浏览器版本的，至少需要包含vue的运行时的源码，就是我们说的vue.runtime.min.js这个文件，这个文件的话大家可以在网上搜索下载。
那么说的到这里就有很多人问了运行时源码和完整版有什么不同？
我们在运行时源码缺少编译器而完整版的却有编译器，因为vue-loader 编译后已经编译了template，所以就不需要再次编译，这也就意味着我们运行时源码还要小，更多的相关内容我们可以在vue官方文档中查阅！而且我们要是使用bootcdn运行时体积会更小。
二、从哪里引入？
我们通过在新建一个vue-cli3项目，在项目中的public/index.html的head元素中引入相关的cdn，代码如下：
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>vue-app</title>
<script
src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"
crossorigin="anonymous"
></script>
<script
src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"
crossorigin="anonymous"
></script>
</head>在代码中我们在script元素中设置了crossorigin属性，为了避免跨域的警告，更多的相关内容我们可以在CORS settings attributes。而且在这个项目中vue和vue-router 都使用 cdn 来引入了，减少了很多体积。
三、是否需要删除 import vue语句？
首先对于这个问题我们是不需要进行删除的，我们只需要在webpack中设置不打包vue在使用cdn引入模块就可以了，当然如果有小伙伴想要进行一个删除也是可以的，但是呢一般是不建议，因为如果你在安装我们的项目的时候使用的是eslint的编辑器的话它是会直接报错的，就类似 Vue undefined 这样的一些错误，但是我们是可以用 window.Vue 来调用，但是呢这边是不建议，因为我们如果这样的话会出现丢失语法提醒。如果大家是是安装了 typescript 那么我们是还要写额外的全局类型等等其他的相关内容，所以小编这边建议不删除。
那么就会有人问了，我们要怎么忽略已经用cdn引入的模块在打包的时候？对于这个的话我们可以在vue.config.js文件中添加下面这些代码：
module.exports = {
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter'
}
}
}在代码中的属性名是我们引入的模块名，值的话是需要替换的变量，这个值必须和cdn中提供的一样，这个作用的话就是使用外部引入的扩展，这样的话我们在build的时候这个模块，我们在可以webpack外部拓展中查阅相关内容。
注意：对于源代码我们只是改了 “public/index.html”这个文件和配置了 vue.config.js，没有修改其他代码。
四、打包测试
我们在不使用 cdn 的情况打包的 dist 文件夹（注释掉 vue.config.js 添加的代码就可测试）：
$ vue-cli-service build
dist\js\chunk-vendors.c79ff8b4.js 114.63 KiB 40.43 KiB
dist\js\app.dfdf8bae.js 4.71 KiB 2.07 KiB
dist\js\chunk-7a70a114.6f60ed21.js 0.55 KiB 0.37 KiB
dist\css\app.7fe16c18.css 0.49 KiB 0.25 KiB
dist\css\chunk-7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB而且在这个文件中的 venders 有114KB，它是包含了 webpack + vue + vur-router。 使用 cdn 的情况打包的 dist 文件夹：
yarn run v1.17.3
DONE Compiled successfully in 6367ms
File Size Gzipped
dist\js\chunk-vendors.7876bfa1.js 24.21 KiB 8.86 KiB
dist\js\app.7fb99721.js 4.78 KiB 2.10 KiB
dist\js\chunk-7a70a114.759e91f3.js 0.55 KiB 0.38 KiB
dist\css\app.7fe16c18.css 0.49 KiB 0.25 KiB
dist\css\chunk-7a70a114.98f4dffc.css 0.28 KiB 0.17 KiB然而这个时候 venders 只有24KB，它里面包含的只有 webpack 的相关代码了。
以上就是“怎么用vue-cli cdn方式引入vue模块”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
