Vue-CLI 4.0配置CDN的方法

最新推荐文章于 2024-07-10 17:19:51 发布

xinyuandu

最新推荐文章于 2024-07-10 17:19:51 发布

阅读量1.6k

点赞数

分类专栏： vuecli 文章标签： vue.js 前端 webpack npm cdn

本文链接：https://blog.csdn.net/xinyuandu/article/details/109245655

版权

本文详细介绍了如何在Vue-CLI 4.0项目中配置CDN，包括创建vue.config.js文件，确定CDN路径，并在public/index.html中引入CDN链接，同时在vue.config.js中设置忽略打包的文件，以实现减小打包文件大小的目的。注意在引用CDN时需根据源码中导出的名称匹配。

摘要由CSDN通过智能技术生成

Vue-CLI 4.0配置CDN的方法

之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助

创建vue.config.js

创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。

找到CDN的路径

如果要引用cdn，首先还是要找到CDN路径，这个是很重要的，推荐两个网站可以下载cdn：cdn链接入口1
cdn链接入口2

开始引用CDN

首先需要在public/index.html文件中引入链接，最好是在header中引入，代码结构如下：

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=1200p