关于vite+vue+图片用cdn加速的问题

最新推荐文章于 2024-07-28 21:13:28 发布
最新推荐文章于 2024-07-28 21:13:28 发布
阅读量1.4k 收藏 1
点赞数 6
分类专栏： 一些小问题 文章标签： vue.js javascript 前端 cdn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wotaishuaile__/article/details/123152198
版权

在img标签中的src属性如果是https://xxx.oss/* 这种跨域引入图片资源，开发时可以跨域，而打包之后无法跨域。vite会把该src解析为import引入js模块，进而发生跨域错误。

解决方案

        根据vite官方文档（静态资源处理 | Vite 官方中文文档）可以通过在url后面加上?raw, 这样vite打包时就不会把url解析为jsmodule，cdn也能正常使用

辗转反侧的咸鱼
关注
专栏目录
vite+vue3.0项目如何引入pinia
我的博客
12-12 371
二、在项目下创建store文件夹，创建index.js和userInfo.js。三、index.js文件如图所示。一、第一步安装pinia。
vite+vue3+ts搭建项目八（打包性能优化三：使用CDN）
qq_23858785的博客
04-12 8287
解决：importToCDN时在引入vue后添加vue-demi，已在vite.config.ts中给出，其他插件在vue-demi之后（顺序很重要）直接按照下面这张方法是不行的，在vite.config.ts文件中，为importToCDN添加。这样就不需要手动引入了，但是需要添加一个新的npm包，实际项目中可以自行选择是否添加。需要注意的是，css可以使用本地的，使用本地的就不要添加css，输入对应名称，会自动跳转到对应的js文件，复制粘贴，，如上注释所示，其实是不需要的，：网上很多教程，还需要在。
Vite开发Vue项目时，打包后将图片替换成CDN链接
大赚万万亿
04-21 1519
在使用 Vite 打包 Vue 项目时，可以使用 Vite 的构建钩子 build:before 来实现将图片引用地址修改为 CDN 地址的功能。在 beforeWrite.writeBundle 函数中，使用 glob 包获取构建后的文件列表，遍历文件列表，查找并替换所有引用的图片路径。
vite打包优化CDN压缩分析报告
最新发布
weixin_50307964的博客
07-28 308
以上的几种方法是打包优化的基本方法，大家可以根据各自的需要进行配置以及增加其他的打包优化等问题。
Pull Request 开源pr实战,过程详细,修改vite-plugin-cdn-import； cdn只导入css
潜心
10-30 665
开源的过程真的是走向未来的过程，通过阅读别人优秀的代码，不仅丰富了思想实践能力，也增强了我们对编码的热情；📚git专栏☃️ 个人简介：一个喜爱技术的人。🌞 励志格言: 脚踏实地，虚心学习。
为什么有人说 vite 快，有人却说 vite 慢？
LuckyWinty的博客
08-20 476
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言谈到 Vite，给人的第一印象就是 dev server 启动速度快。同样规模的项目，相比 Webpack 动辄十几秒甚至几十秒的的启动速度，Vite 简直是快到没朋友，往往数秒之内即可完成启动(PS: 都没有时间去喝一杯 ☕️ 啦)。正好小编最近在做一些关于开发体验的性能优化，就想着把手上一些项目的开发模式更新为 Vite。经过一番操...
Vite + Vue3 使用cdn引入依赖 vite cdn vue3 cdn vite引入cdn
半只
09-20 2149
打包出来的才是CDN引入，本地开发走的还是NPM本地包引入， 所以先使用 NPM方式引入，在改为CDN方式，改为CDN不需要动。插件针对的是生产环境CDN引入，本地开发环境还是需要 NPM 的。这个文件不需要动，因为。
vite3+vue3 项目打包优化三 — CDN加速、文件压缩
前端知识分享喵
05-24 2285
内容分发网络（Content Delivery Network，简称 CDN），是构建在数据网络上的一种分布式内容分发网，它可以让用户从最近的服务器请求资源，以提升网络请求的响应速度。：一但依赖网站出现问题，我们的项目也就不行了，建议留下备用方案，以便维护。把打包好的项目放入服务器目录，服务器开启 gzip 服务，这样通过项目地址就可以在浏览器中进行访问了。需要注意的是，浏览器解压也是需要时间的，如果项目体积不是很大的话，不建议采用 gzip 进行压缩
vite3+vue3 项目打包优化
前端知识分享喵
05-16 2038
现在很多小伙伴都已经使用 Vite + Vue3 开发项目了，如果你是 “前端架构师” 或者是 “团队核心” 的话，不得不可考虑的一个问题就是性能优化。本篇文章主要讲述的是生产环境下 Vite + Vue3 打包优化。
vite+vue3项目打包cdn
10-16
好的，关于vite+vue3项目打包cdn，你可以按照以下步骤进行操作： 1. 在项目根目录下创建一个名为`vite.config.js`的文件，并在其中添加以下代码： ```javascript import { defineConfig } from 'vite' export ...
Vue + Vite2 + Ant Design Vue 2 等包的 cdn 配置 JS CSS 终极模板
11-02 3745
首先引入vite2 的 cdn 插件 npm install vite-plugin-cdn-import --save-dev 然后在你的vite.config.js里面写 import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import importToCDN,{autoComplete } from 'vite-plugin-cdn-import' export default defineConfi
Vite vue 使用cdn引入element-plus
^_^
04-25 2883
使用cdn 引入 element-plus 一定也要用cdn 引入 vue、vue-demi 并且引入顺序不能出错， 注意点 ① 如果不引入vue，就会提示createElementVnode找不到，原因是在element-plus这个源码中也在使用vue这个变量 ②如果不引入vue-demi，可以理解为vue和vue-demi 是互相引用的关系 ③注意使用vite-plugin-cdn-import插件 不能按需引入element、直接在main.ts中使用全局引入的方式，打包后会自动按照cdn引
vite中 vue项目中引入并使用vant
业余前端的职业经历
03-17 5683
vue3 来的同时。也带火了 vite,不过现在仍然是webpack称王的时代,vite也在快速发展中. 今天讲的主角是 vant, 那么在vite中使用 按照官方文档 照样给我报错了 初始化 vite项目之后 安装vant npm install vant --save yarn add vent --save 在vite中使用vant还需要其他的插件辅助, 就是vite-plugin-style-import 这里官方推荐的是 1.4.1版本 yarn add vite-plugin-style-im
使用cdn实现Vue+Vant
qq_51249969的博客
04-19 1116
【代码】使用cdn实现Vue+Vant。
[vue-next-admin] vue3 + vite 打包 gzip 压缩、cdn 加速
qq_34450741的博客
03-25 2364
[vue-next-admin] gzip 压缩、cdn 加速
vue3.0 + vite + ts 完成自动导入 vue API 和 自动导入组件及 element loading 指令无法正常使用解决方法
阿臻
04-06 9715
插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的) npm i unplugin-auto-import unplugin-vue-components -D 使用, 下面是最简单的使用方法 vue component 文档 auto-import 文档很简单, 还需自行探索, 大佬一贯思想, 他很懒, 不想写文档, 看源码就够了 // https://vitejs.dev/config/ export default defineConfig({ plugins: [ .
vite配置cdn优化打包体积
m0_68324632的博客
09-13 9102
大家都知道前端性能优化的方法，cdn外部引入的方法可以使项目打包后体积大大缩小，所以是前端性能优化方面非常推荐的方法之一。本文关于项目如何cdn引入做一个简单教程，我们可以通过两种方式引入配置cdn。由于vite的核心基于rollup和webpack不同，所以cdn引入方式也不同具体rollup配置项可以阅读vite官网。rolluppluginsexternalvite这次带来了两种方法打包Element plus ，同样的只要有cdn链接，我们就可以用这两种方式进行引入。
vue项目index.html引入文件cdn无法访问，导致项目打不开
weixin_44056717的博客
05-25 2648
vue项目index.html引入文件cdn无法访问，导致项目打不开
Vite 性能篇：掌握这些优化策略，一起纵享丝滑！
前端阿飞V的博客
12-20 2401
很多兄弟都在使用 Vite 了，但如果你是前端 leader 或者是团队核心的话，不得不可考虑的一个问题就是性能优化。Vite 在开发环境性能已经非常不错了，今天我们主要聊聊生产环境的优化，其实方式和 Webpack 大同小异，只不过 Vite 构建时使用的是 Rollup 而已。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值