vue-cli cdn方式怎引入vue模块？引入vue模块的经验分享！

2021-06-23 15:32:59 浏览数 (5198)

在有关于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

w3cschool 编程狮，随时随地学编程

vue-cli cdn方式怎引入vue模块？引入vue模块的经验分享！