文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Vue3+Vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案

Vue3+vite前端项目部署后部分图片资源无法获取、动态路径图片资源报404错误的原因及解决方案 本篇博客旨在填补去年遇到的一个技术坑。...；动态渲染获取图片失败_访问代理服务器图片加载不出来 一、情景介绍 1、问题出现的场景 最近开发一个前端项目，在开发环境和部署到内网的生产环境都没问题。...当反向代理配置不当时，可能导致一些资源的路径错误，进而导致资源加载失败。 三、造成该现象的原因 问题的根源在于 Vite 的动态路径解析方式。...在开发环境中，Vite 会根据根路径（base）自动解析资源路径，但当通过反向代理部署时，代理服务器可能会为项目添加一个子路由路径（根据nginx的配置来决定）。...以这个nginx配置为例，部署之后拼接的资源动态路径就是“域名+high+动态路由”，可如果你的项目base目录是默认值或者“./”，那资源的实际路径其实是“域名+动态路由”，自然就会报404错误。

1.4K00

现代 Web 开发跨域解决方案终极指南

开发环境：Vite/Webpack 配置 在现代前端框架（如 Vue, React）的开发环境中，我们通常使用 Vite 或 Webpack 作为开发服务器。...生产环境：Nginx 配置 在项目部署到生产环境时，Nginx 是最常用的反向代理服务器。它不仅能处理跨域，还能提供负载均衡、静态资源服务、缓存等多种功能。...虽然这只是开发环境下的端口不同，但在浏览器看来这就是“跨域”。虽然可以通过后端配置 CORS 来解决，但在开发阶段，更优雅、更安全的方式是利用开发服务器（如 Vite、Webpack）进行反向代理。...设为 true 时，会自动修改请求头中的 host 为 target 的值。很多后端框架（如 Nginx、Java Spring）会校验 host，不开启可能导致 403/404 错误。...缺点：仅限开发环境：Vite 代理只在 vite dev 启动的开发服务器中生效。项目打包上线后，Vite 服务器不再运行，代理配置也随之失效。

67810
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    一个基于vite构建的vue3+pinia+ts+elementUI plus的初始化开箱即用的项目模版

    而Vite作为新一代的新型前端构建工具，使用它能够显著提升前端开发体验。...什么是Vite 这里借用官方的介绍： 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。...配置路由的类型是 RouteRecordRaw，这里 meta 可以让我们有更多的发挥空间，这里提供一些参考 title:string; 页面标题，通常必选。...vite 提供了两种模式：具有开发服务器的开发模式（development）和生产模式（production） 项目根目录新建: .env.development NODE_ENV=development...Vue 3 单文件组件支持 @vitejs/plugin-vue-jsx 提供 Vue 3 JSX 支持（通过 专用的 Babel 转换插件） @vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持

    1.7K70

    为你的Vue2.x老项目安装Vite发动机吧！

    在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。...常见错误处理 全局变量获取错误 在 升级为vite之后，我们的环境变量用process.env是获取不到的，我们需要在vite.config.js中添加下面这项配置： define: { 'process.env...配置的时候需要注意不要和本地冲突，因为vite的加载文件方式都是通过直接加载本地文件来实现的，每一次的加载都是网络请求，所以可能会被你的代理配置影响到，如果出现404错误，可以看看是不是这个原因。...，vite为我们提供了替代方法：import.meta.globEager，比如store的模块注册可以下面这样批量注册： const modulesFiles = import.meta.globEager...，我们可以试想一下，每次在加载图片的时候像你的项目询问获取图片，这个时候的路径不是你本地项目的路径，而是静态服务器的路径，通过相对路径去获取就会404，所以我们可以直接使用绝对路径绑定src/xxx这样的形式

    1.9K50

    一文掌握Axios：前后端数据交互竟如此简单

    例如，服务器错误、网络断开、请求超时等。Axios 为我们提供了灵活的错误处理机制。...更好的错误处理：axios 能根据不同的 HTTP 状态码自动分类错误，使得错误处理更清晰。 配置方便：可以在实例化 axios 时设置默认配置，例如基 URL、超时时间、头信息等。...自动化处理：axios 提供请求和响应拦截器、错误处理、自动 JSON 解析等功能，适合对 HTTP 请求有大量需求的项目。...简单上手：使用 axios 发起请求更简单，可以直接获得解析后的数据并处理错误，而不需要额外的代码。 axios 让基于 Promise 的 HTTP 请求更强大和便捷，在实际开发中是非常常用的选择。...如果项目中大量依赖 API 请求，axios 可以大大简化代码，提高开发效率。 总结扩展 在本文中，我们已经全面介绍了Axios 的基本使用，包括如何发送请求、处理响应、配置拦截器、处理错误等。

    2.6K20

    为什么 Vite 的请求有时候是相对路径，有时候是 @fs + 绝对路径？

    如果访问了允许范围外的文件，Vite 就会返回以下错误页面。图片我们通过 localhost 访问的，别人用 localhost + 绝对路径也是访问它自己的机器，这应该没什么安全问题？...代码是写在服务器上的，然后 Vite 也是跑在服务器上的，然后通过网络去访问页面。这种情况下，就要远程访问 Dev Server，就会有安全问题，要防止别人通过绝对路径，访问到服务器上的其他数据了。...有关远程开发细节，可以查看我的文章《JetBrains 远程开发的使用和心得》Vite 文件安全访问策略我们直接从源码看看，Vite 是如何判断是否有允许访问的：// 函数返回 true 就是允许访问function...fs 策略，对应的 Vite 配置是 server.fs.strict，默认是 true是否命中 deny 拒绝名单，对应的配置是 server.fs.deny，默认为 ['.env', '.env.*...对应的配置是 server.fs.allow，如果不配置，Vite 将当前目录加入到 allow，如果是 monorepo 项目，还会将 workspaces 的目录加入到 allow如果不被允许，Vite

    4.6K20

    为什么 Vite 的请求有时候是相对路径，有时候是 @fs + 绝对路径？

    如果访问了允许范围外的文件，Vite 就会返回以下错误页面。 我们通过 localhost 访问的，别人用 localhost + 绝对路径也是访问它自己的机器，这应该没什么安全问题？...代码是写在服务器上的，然后 Vite 也是跑在服务器上的，然后通过网络去访问页面。这种情况下，就要远程访问 Dev Server，就会有安全问题，要防止别人通过绝对路径，访问到服务器上的其他数据了。...是否执行了严格的 fs 策略，对应的 Vite 配置是 server.fs.strict，默认是 true 2....是否命中 deny 拒绝名单，对应的配置是 server.fs.deny，默认为 ['.env', '.env.*', '*.{pem,crt}'] 3. 是否为项目中使用到的文件。...对应的配置是 server.fs.allow，如果不配置，Vite 将当前目录加入到 allow，如果是 monorepo 项目，还会将 workspaces 的目录加入到 allow 如果不被允许，Vite

    2.6K30

    Vite 进阶配置：插件开发、按需加载与生产环境优化

    Vite 进阶配置：插件开发、按需加载与生产环境优化 目标与场景 插件开发：编写可复用的 Vite 插件（基于 Rollup 插件接口 + Vite 拓展钩子） 按需加载：路由/组件/资源的懒加载与自动导入...，提高首屏与交互性能 生产优化：分包策略、预构建、资源提示与分析，稳定降低包体与构建时间 插件架构与钩子 基于 Rollup 插件体系，Vite 额外提供 configureServer、transformIndexHtml...href="https://cdn.example.com">` return html.replace('', `${hint}`) } } } 开发服务器拓展...预构建冲突：optimizeDeps.include/exclude 精确控制；避免同时引入 CJS/ESM 导致重复 过度分包导致请求过多：为首屏路由保留合并，后续路由按需分割 插件顺序：enforce 配置不当导致转换顺序错误...；通过 vite-plugin-inspect 排查 CDN 路径与资源 404：base 与静态资源路径需一致；部署端正确配置缓存与回源 实战清单（12 项） 编写通用插件：banner、virtual

    39610

    苹果罕见技术失误：一次“漏掉 SourceMap”引发的 App Store 前端泄露(含源码)

    SourceMap 是前端开发时的重要调试工具，它会将线上压缩后的 .js/.css 文件映射回人类可读的源码，方便定位问题。但…… 正常生产环境必须关闭 SourceMap！...⛔️ 不包含后端代码、敏感配置或用户数据 也就是说，功能重现没问题，但无法用于攻击苹果服务器或获取隐私信息。...运行步骤（以 PowerShell 为例）： # 进入仓库根目录（示例） Set-Location -Path 'd:\dragon\page\apps.apple.com-main' # 启动本地静态服务器...错误，原因是 HTML 引用的资源名带 ~，但磁盘上文件实际无该符号。...这次公开“翻车”不仅让开发者窥见苹果前端架构，对于学习 Svelte + Vite 实战的朋友而言，也是一份宝贵的“实战级”代码库。

    2K70

    Vite2+React+TypeScript：搭建企业级轻量框架实践

    TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。 Vite Vite是一种新型前端构建工具，能够显著提升前端开发体验。...└── vite.config.ts vite配置 其中，src/utils里面放置全局方法，供整个工程范围的文件调用，当然工程初始化的事件总线也放在这里「下面会细述」。...} }; }); 工程添加了mock模式供开发者在没有服务端情况下模拟数据请求，通过vite-plugin-mock插件全局配置到vite中，mock接口返回在mock目录下增加，mock...FYI：vite-plugin-mock插件在vite脚手架下提供devtools network拦截能力，假如你要实现更多mock场景，请使用mockjs「项目已安装，直接可用」。...生成一个axios的实例供项目调用； 配置errorHandle句柄，处理错误； 当然在第2步，你可以添加额外的请求拦截，例如RSA加密，本地缓存策略等，当逻辑过多时，建议通过函数引入。

    2.5K10

    用vuepress2搭建自己的github网站

    最近打算自己做一个博客网站记笔记，然后部署到github上，最终选择了vuepress的最新版本v2（使用的是vue3和TypeScript开发，默认使用Vite作为打包工具）。...工具的部署，vuepress文档上也有写，我们这里选择用 GitHub Actions 部署到 GitHub Pages，根据步骤直接操作就行了，需要注意的几个地方：1、官方提供的GitHub Actions...404，就是没部署成功去代码仓库的Actions里去看下流水线有没有成功，失败了会是一个红色的小叉叉，点进去可以看到具体的错误位置，成功了是一个绿色的小勾流水线成功了gh-pages分支里就会自动生成最终打包出来的文件...base 设置为仓库名就可以了，注意前后要加/，示例：base："/REPO/"。...not defined，vue3的官方文档上也有介绍： Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动3. markdown中使用vue组件v2版本中像

    88510

    lnmp - Mysql同步数据、跨域解决办法、Sftp传输文件

    概述整理一下最近开发中遇到的小问题，解决了Mysql同步数据、跨域解决办法、Sftp传输文件在这里做一个节点，进行整理和总结。...Mysql 上传大sql文件策略再实际的开发过程中会遇到迁移数据库，，数据库文件过大而导致的上传失败，这里提供了2个解决办法：1.phpmyadmin方式phpMyadmin 默认上传文件50M，如果超出了大小限制...Nginx会抛出413 Request Entity Too Large错误，phpMyadmin修改2个地方的配置可以解决,修改post_max_size和upload_max_filesize参数。...client_max_body_size 50m;}2.Mysql方式如果使用的是Mysql的软件，比如nvaicat,就需要修改mysql的配置文件中的max_allowed_packet的值，比你运行的...Nginx 高性能配置PHPNginx有很多种配置PHP的方式，下面介绍unix方式和php-fpm方式，使用unix通信方式性能更优，原因是使用tcp层进行通信，减少了网络的往返开销，以此来提升性能。

    717138

    用vuepress2搭建自己的github网站

    最近打算自己做一个博客网站记笔记，然后部署到github上，最终选择了vuepress的最新版本v2（使用的是vue3和TypeScript开发，默认使用Vite作为打包工具）。...CI工具的部署，vuepress文档上也有写，我们这里选择用 GitHub Actions 部署到 GitHub Pages，根据步骤直接操作就行了，需要注意的几个地方： 1、官方提供的GitHub Actions...404，就是没部署成功 去代码仓库的Actions里去看下流水线有没有成功，失败了会是一个红色的小叉叉，点进去可以看到具体的错误位置，成功了是一个绿色的小勾 流水线成功了gh-pages分支里就会自动生成最终打包出来的文件...base 设置为仓库名就可以了，注意前后要加/，示例：base："/REPO/"。...is not defined，vue3的官方文档上也有介绍： Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动 3. markdown中使用vue组件

    85940

    Ubuntu云服务器上部署发布Vite项目

    1 拷贝代码 一般来说是Windows环境下开发，Ubuntu环境下部署。因此首先要考虑的问题是如何将Vite项目的源代码拷贝到云服务器上面去。...接下来是杀掉所有包含node和npm的进程，因为脚本可能需要多次使用，每次使用之前Web服务可能已经启用了。最后使用Vite提供的预览服务(npm run preview)来发布该应用。...3 配置域名 如果是开发环境完成以上步骤就可以结束了，但是在云服务器上部署发布Web项目一般都是想通过域名来访问，并且最好省略端口号。具体步骤如下： 在云服务器提供商的后台配置端口号。...一般新的服务器出于安全考虑，端口号都是设置成不对外开放的。以天翼云为例，是在访问控制的安全组中配置端口号的： 在域名服务商的后台，将域名的解析地址指向云服务器的IP地址。...国内的云服务器提供商统一要求先备案，才能对外开放80端口和443端口。 4. 配置SSL 如果不想被浏览器提示不安全，那么最好就要使用HTTPS，要使用HTTPS就要申请SSL证书。

    39410

    Vite2+Vue3+TypeScript：搭建企业级轻量框架实践

    引言 随着Vue3为广大开发者所接受和自身生态逐渐完善，更多同学往vue3的工程化方向完善，本文恰好给大家介绍下如何更好使用vue3及其周边插件，以及让他们组合到整个工程中去。...到了Vue3的时代，框架已经完美兼容了typescript，而且配置也简单，对代码入侵也小，给开发者带来了很大便利。 Vite Vite是一种新型前端构建工具，能够显著提升前端开发体验。...└── vite.config.ts vite配置 其中，src/utils里面放置全局方法，供整个工程范围的文件调用，当然工程初始化的事件总线也放在这里「下面会细述」。...} }; }); 工程添加了mock模式供开发者在没有服务端情况下模拟数据请求，通过vite-plugin-mock插件全局配置到vite中，mock接口返回在mock目录下增加，mock...FYI：vite-plugin-mock插件在vite脚手架下提供devtools network拦截能力，假如你要实现更多mock场景，请使用mockjs「项目已安装，直接可用」。

    3.4K73

    Vite2+React+TypeScript：搭建企业级轻量框架实践

    TypeScript 是 JS类型的超集，并支持了泛型、类型、命名空间、枚举等特性，弥补了 JS 在大型应用开发中的不足。 Vite Vite是一种新型前端构建工具，能够显著提升前端开发体验。...└── vite.config.ts vite配置 其中，src/utils里面放置全局方法，供整个工程范围的文件调用，当然工程初始化的事件总线也放在这里「下面会细述」。...} }; }); 工程添加了mock模式供开发者在没有服务端情况下模拟数据请求，通过vite-plugin-mock插件全局配置到vite中，mock接口返回在mock目录下增加，mock...FYI：vite-plugin-mock插件在vite脚手架下提供devtools network拦截能力，假如你要实现更多mock场景，请使用mockjs「项目已安装，直接可用」。...生成一个axios的实例供项目调用； 配置errorHandle句柄，处理错误； 当然在第2步，你可以添加额外的请求拦截，例如RSA加密，本地缓存策略等，当逻辑过多时，建议通过函数引入。

    2.6K20

    Vite2+Vue3+TypeScript：搭建企业级轻量框架实践

    [w4gln4myxo.png] 引言 随着Vue3为广大开发者所接受和自身生态逐渐完善，更多同学往vue3的工程化方向完善，本文恰好给大家介绍下如何更好使用vue3及其周边插件，以及让他们组合到整个工程中去...到了Vue3的时代，框架已经完美兼容了typescript，而且配置也简单，对代码入侵也小，给开发者带来了很大便利。 Vite Vite是一种新型前端构建工具，能够显著提升前端开发体验。...└── vite.config.ts vite配置 其中，src/utils里面放置全局方法，供整个工程范围的文件调用，当然工程初始化的事件总线也放在这里「下面会细述」。...} }; }); 工程添加了mock模式供开发者在没有服务端情况下模拟数据请求，通过vite-plugin-mock插件全局配置到vite中，mock接口返回在mock目录下增加，mock...FYI：vite-plugin-mock插件在vite脚手架下提供devtools network拦截能力，假如你要实现更多mock场景，请使用mockjs「项目已安装，直接可用」。

    2.8K21
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券