vue项目中使用CDN引入
2023-09-11 14:16:59 时间
🐱 个人主页:不叫猫先生
🙋♂️ 作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!
💫系列专栏:vue3从入门到精通、TypeScript从入门到实践
📢 资料领取:前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流:博主建立了一个前端交流群,汇集了各路大神,一起交流学习,期待你的加入!(文末有我wx或者私信)
前言
CDN(内容分发网络)指请求资源的方式,即通过script头去请求对应的脚本资源的一种方式,项目里配置之后不需要通过npm
包管理工具去下载配置的包。
目的:将引用的外部js、css
文件剥离开来,不编译到vendor.js
中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js
、外部的js等加载下来,达到加速首页展示效果。
1. 在vue.config.js进行配置
本人对vue
、vuex
、vue-router
、axios
、element-ui
、echarts
进行了cdn引用。(请求element-ui
、echarts
的cdn较慢)
//生产环境标记
const IS_PRODUCTION = process.env.NODE_ENV === 'production'
//配置引用cdn的js、css地址
const cdn = {
css: [
'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
],
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.2/vue-router.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js',
'https://unpkg.com/element-ui@2.13.2/lib/index.js',
'https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js'
]
}
//配置打包时使用CDN节点(加入externals外部扩展), 忽略打包的第三方库
//左面放package.json中的扩展的名称,右面放项目依赖的名称(项目初始化要用的名称)
const externals = {
// 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的,不去 node_modules 中找,而是去找全局变量 Vue(其他的为VueRouter、Vuex、axios、ELEMENT、echarts,注意全局变量是一个确定的值,不能修改为其他值,修改为其他大小写或者其他值会报错,若有异议可留言)
vue: 'Vue',
'vue-router': 'VueRouter',
vuex: 'Vuex',
axios: 'axios',
'element-ui': 'ELEMENT',
'echarts': 'echarts'
}
chainWebpack(config) {
if (IS_PRODUCTION) {
config.plugin('html').tap(args => {
args[0].cdn = cdn
return args
})
//视为一个外部库,而不将它打包进来
config.externals(externals)
}
}
2.在public/index.html文件配置
使用 webpack
中自带的插件 html插件进行配置,在 index.html
中增加判断,是否使用 CDN, htmlWebpackPlugin.options
使用的是vue.config
中的config.plugin('html')
的插件属性。
<!-- 使用CDN的CSS文件 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %>
<!-- 使用CDN加速的JS文件,配置在vue.config.js下 -->
<% for (var i in
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
3.易出错点
- Router is not defined
解决方案: 将Router 改为 ‘VueRouter’ - Uncaught TypeError: Illegal constructor
解决方案:修改externals 中‘'element-ui’的value
const externals = {
'element-ui': 'ELEMENT',
}
相关文章
- import Vue from 'vue';
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue - 引入集成 Tinymce 富文本编辑器(详细步骤及运行Demo),在 Vue.js 项目中使用富文本插件详细教程,附带超级详细的注释说明
- Vue - route 路由中配置 404 页面
- Vue 项目中断点没有跳转到指定源码的问题
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目 (增补)
- vue实战入门后台篇十:springboot+mybatis实现网站后台-项目整合发布测试
- 【vue init】二.项目使用vue-router,引入ant-design-vue的UI框架,引入less
- vue项目启动时自动获取ip地址
- 使用vue-cli3搭建一个项目!!!
- 浅析VUE项目如何使用qiankun搭建微前端架构
- 从源码角度浅析Vue常见知识点
- electron-vue项目修改注册表在系统右键菜单中添加功能
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
- Vue脚手架(vue-cli)搭建和目录结构详解
- Vue项目部署后,刷新提示404
- spring boot + vue + element-ui全栈开发入门——项目部署