在有关于vue的学习中我们会遇到很多的问题，今天小编就来和大家说说有关于“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模块？”这个问题的相关，当然如果你有更好的方法也可以和大家一起分享讨论，更多的相关与vue的知识内容我们都可以在W3cschool中学习和了解。
相关资料：
vue官方文档链接：https://cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A
bootcdn链接：https://www.bootcdn.cn/
CORS setting attributes 链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin
webpack外部扩展：https://webpack.docschina.org/configuration/externals/#externals
