怎么用vue-cli cdn方式引入vue模块

发布时间：2022-01-26 16:36:05 作者：iii
来源：亿速云阅读：445

今天小编给大家分享一下怎么用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-cli cdn方式引入vue模块

相关阅读