首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vite构建始终使用静态路径

Vite是一个基于JavaScript的下一代前端构建工具,它专注于快速的开发服务器和热模块替换 (HMR)。在使用Vite构建项目时,默认情况下会使用静态路径。

静态路径是指在项目构建过程中,资源文件(例如HTML、CSS、JavaScript、图片等)的引用路径不会被修改。相反,它们将保持不变,即相对于项目根目录的路径。

这种静态路径的使用有几个优势:

  1. 更快的构建速度:由于静态路径的使用,Vite在构建项目时不需要对资源文件的引用路径进行额外的处理,因此构建速度更快。
  2. 更简洁的配置:静态路径的使用消除了对构建配置中路径相关设置的需求,简化了配置过程,使开发者能够更专注于业务逻辑。
  3. 更便于调试:由于静态路径的使用,源代码与实际运行的资源文件之间的对应关系更清晰,方便开发者进行代码调试和错误排查。

在Vite中,你可以使用以下方式来使用静态路径:

  1. 在HTML文件中,可以使用相对路径来引用静态资源,例如:
  2. 在HTML文件中,可以使用相对路径来引用静态资源,例如:
  3. 在CSS文件中,可以使用相对路径来引用其他资源文件,例如:
  4. 在CSS文件中,可以使用相对路径来引用其他资源文件,例如:

需要注意的是,由于使用了静态路径,当你将项目部署到不同的环境(例如开发、测试、生产)时,可能需要手动修改资源文件的引用路径,以确保文件能够正确加载。

在腾讯云的产品中,如果你想托管Vite构建的静态网站或应用,推荐使用腾讯云的对象存储(COS)服务和内容分发网络(CDN)服务。对象存储服务提供了高可靠、高扩展、低成本的存储服务,而内容分发网络服务则可以将静态资源缓存到离用户更近的边缘节点,提供更快的访问速度。

腾讯云对象存储(COS)产品介绍:https://cloud.tencent.com/product/cos

腾讯云内容分发网络(CDN)产品介绍:https://cloud.tencent.com/product/cdn

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vite 是如何使用 Rollup 进行构建的

我们都知道,Vite 在生产环境中,会使用 Rollup 进行构建,那么 Vite 是如何做到的呢?本文将讲述,从执行 vite build 到输出构建产物,这期间到底发生了什么?...这部分在该 pull request 已经被删除,但截至发文该改动未被合入到 master执行构建在 doBuild 函数中,Vite 利用 Rollup 的 JS API 执行构建。...Vite 也能正确的执行构建const input = //如果设置了 build.lib 对象,则对 build.lib 进行处理,需要支持多入口构建 libOptions ?...在 vite build 与 vite dev 两种模式下,使用的插件都是相同的,Vite 在开发模式下,模仿 Rollup 仿造出了一套拥有相同的 API 的插件架构,使得插件在两种模式下都能正常使用...Vite 通过在 dev 模式时,模拟出一套与 Rollup 相同的插件架构,通过 dev 和 build 模式使用同一套插件,从而使两个模式下有相同的构建行为。

2.2K20

Vite 是如何使用 Rollup 进行构建的

我们都知道,Vite 在生产环境中,会使用 Rollup 进行构建,那么 Vite 是如何做到的呢?本文将讲述,从执行 vite build 到输出构建产物,这期间到底发生了什么?...这部分在该 pull request 已经被删除,但截至发文该改动未被合入到 master 执行构建 在 doBuild 函数中,Vite 利用 Rollup 的 JS API 执行构建。...,因此我们配置中即使没有填入口,Vite 也能正确的执行构建 const input = // 如果设置了 build.lib 对象,则对 build.lib 进行处理,需要支持多入口构建...在 vite build 与 vite dev 两种模式下,使用的插件都是相同的,Vite 在开发模式下,模仿 Rollup 仿造出了一套拥有相同的 API 的插件架构,使得插件在两种模式下都能正常使用...Vite 通过在 dev 模式时,模拟出一套与 Rollup 相同的插件架构,通过 dev 和 build 模式使用同一套插件,从而使两个模式下有相同的构建行为。

1.2K20
  • 【Android NDK 开发】Android Studio 使用 CMake 导入静态库 ( CMake 简介 | 构建脚本路径配置 | 引入静态库 | 指定静态库路径 | 链接动态库 )

    CMake 简介 : ① 构建工具 : CMake 是 Android 中使用 C/C++ 构建原生库的默认工具 ; ② 跨平台 : CMake 是跨平台的构建工具 , 其可以根据不同类型的平台 , 不同类型的编译器...# 后续还需要设置导入路径 , 配合该配置使用 add_library( # 设置引入的静态库名称...CMake 构建脚本 CMakeList.txt 设置静态库路径 : # 设置上述静态库的导入路径 # 设置目标属性参数 : # ① 参数 1 ( add ) : 要设置哪个函数库的属性...# 后续还需要设置导入路径 , 配合该配置使用 add_library( # 设置引入的静态库名称...博客资源 ---- CSDN 博客地址 : 【Android NDK 开发】Android Studio 使用 CMake 导入静态库 ( CMake 简介 | 构建脚本路径配置 | 引入静态库 | 指定静态库路径

    2.9K40

    大前端备战2021年,使用vite构建React !

    写在开头 由于 vite这个构建工具被用在了vue3上门,而且它的构建思路我觉得优于webpack,底层也是使用了esbuild,性能上更优 那么为了照顾一些小伙伴之前没有学习过vite的,我们先来看看什么是...await next(); // 静态服务 // 默认会先执行 静态服务中间件 会将结果放到 ctx.body // 需要将流转换成字符串 , 只需要处理...就完成了 开始在react中使用 vite算是一个新的技术,而且在国内目前不够流行,为了避免踩坑,我们直接采用官方推荐的模板生成 npm init vite-app --template react 生成模板完成后...config 写在最后 本文更多是在讲vite的实现原理,目前我还没有把它使用在生产环境中 在我看来,vite如果生态能发展起来,可能我们就用不到wepback6这个版本了(当然未来不可猜测) 通过阅读本文...,你肯定能清楚了解vite的原理和react构建使用了,感觉不错的话,帮我点个赞/在看,关注一下【前端巅峰】公众号吧 参考资料: https://juejin.cn/post/689811... https

    80920

    使用 gulp-file-include 构建前端静态页面

    前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。...很多时候我们在写静态页面的时候也希望能和后台模板一样,将导航、页头、页脚等公用的部分分离出去,然后引入页面中。...单纯的静态页面不具备这种功能,而使用 gulp 插件可以很容易的完成,比如 gulp-file-include 插件。.../dist'));//输出文件路径 }); 导航条 导航条是主要的引用内容,但是一般当前页面的导航都会有选中效果,那么就要使用 gulp-file-include 的判断功能。...生成面包屑的方法很多,我使用了传参的方法,通过传递一个导航路径数组,然后循环生成面包屑。因为面包屑的最后一项没有连接,所以循环要分两次执行。具体方法如下: index.html <!

    1.8K60

    vite基本配置教程

    publicDir 类型: string | false 默认: “public” 作为静态资源服务的文件夹。...该目录中的文件在开发期间在 / 处提供,并在构建期间复制到 outDir 的根目录,并且始终按原样提供或复制而无需进行转换。该值可以是文件系统的绝对路径,也可以是相对于项目的根目录的相对路径。...当使用文件系统路径的别名时,请始终使用绝对路径。相对路径的别名值会原封不动地被使用,因此无法被正常解析。...构建选项 build.rollupOptions 类型: RollupOptions 自定义底层的 Rollup 打包配置。...4.启动vite运行命令,控制台不停的加载js bug回溯 刚开始使用的是动态导入import.meta.glob,控制台报错,因为异步执行routeList挂出去可能会是一个空数组; 后面使用的是直接导入

    53810

    如何在Vite中处理各种静态资源?

    Vite 中引入静态资源时,也支持在路径最后加上一些特殊的 query 后缀,包括:?...url: 表示获取资源的路径,这在只想获取文件路径而不是内容的场景将会很有用。?raw: 表示获取资源的字符串内容,如果你只想拿到资源的原始内容,可以使用这个后缀。?...生产环境处理在前面的内容中,我们围绕着如何加载静态资源这个问题,在 Vite 中进行具体的编码实践,相信对于 Vite 中各种静态资源的使用你已经比较熟悉了。...在 Vite 中,所有的静态资源都有两种构建方式,一种是打包成一个单文件,另一种是通过 base64 编码的格式内嵌到代码中。这两种方案到底应该如何来选择呢?...雪碧图优化在实际的项目中我们还会经常用到各种各样的 svg 图标,虽然 svg 文件一般体积不大,但 Vite 中对于 svg 文件会始终打包成单文件,大量的图标引入之后会导致网络请求增加,大量的 HTTP

    3.2K30

    尤雨溪宣布推出 VitePress 1.0

    前言尤雨溪宣布正式发布 VitePress 1.0 版本,并声称其 “基于 Vite 和 Vue 构建,是 VuePress 的精神继承者和现代替代品。”...VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的站点而设计。...主题和支持VitePress 附带一个用于技术文档的默认主题,为 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 等提供支持。...优势和特性根据介绍,VitePress 旨在使用 Markdown 生成内容时提供出色的开发体验。由 Vite 驱动,始终立即反映 (使用 Vue 增强的 Markdown,由于 Vue 模板的语法与 HTML 兼容,每个页面都是一个 Vue 单文组件。开发人员可以使用 Vue 模板功能或导入的 Vue 组件在静态内容中嵌入交互性。

    37920

    对vite的理解

    Vite 的预解析(Pre-Bundling)"Vite 的预解析"是指在构建阶段对项目的源码进行静态分析和预处理,以提前解析模块的依赖关系和生成优化的代码块,从而提高构建性能和减少启动延迟。...Vite 利用了现代浏览器对 ES 模块的原生支持,可以通过静态分析和预处理源码,提前解析模块的依赖关系,从而减少构建时的工作量和时间。...4、缓存:Vite 会缓存解析过的模块和依赖关系,以便后续的构建过程可以直接使用缓存,避免重复解析和编译。...在构建阶段,Vite 使用 Rollup 进行优化的构建,仅处理入口文件和模块的依赖关系,生成优化的代码块。...Vite 通过预先解析和缓存模块的依赖关系,可以避免不必要的文件扫描和重新编译,提高了构建速度。Vite 会根据需要对代码进行转换和优化,例如压缩代码、处理静态资源等。

    28770

    VitePress 强大的静态网站生成器

    VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的网站而设计。...Vue.js官方文档也是基于VitePress构建的,但使用了一个自定义主题,用于多语言版本之间的共享。...只要数据可以在构建时确定,您可以使用VitePress构建几乎任何类型的网站,包括博客、个人作品集和营销网站。 官方的Vue.js博客是一个简单的博客,它根据本地内容生成索引页面。...基于 Vite 引擎: VitePress实现了即时的服务器启动,对编辑的更改始终在瞬间反映出来(使用Vue模板的特性或导入的Vue组件,在静态内容中嵌入交互性。这意味着您可以在Markdown页面中使用Vue模板的语法和功能来实现交互效果。

    1K20

    使用 vite 重构 webpack 项目过程中对两者之间差异对比的思考( 一 )

    基于 vite 的优点速度快和热拔插功能,最近也在尝试将原来 webpack 构建的项目迁移改用 vite 构建代码,这里将他们迁移过程遇到的问题和总结记录下来。...项目的源码构建 对于项目中的源码,vite 是通过利用浏览器对 ES Module 的支持,直接在浏览器中通过指定的路径请求引入当前需要使用的模块,引用官网的两张图片来看 [vite-001.png]...webpack 构建时,静态的资源都需要相应的 loader 进行处理,比如像 scss,或者 ts ,他们都分别需要使用sass-loader 和 ts-loader,而 ts 还需要加其他的配置,...在资源路径上,webpack 的 alias 配置项可以替换修改资源链接路径,到了 vite 这边使用的就是 @rollup/plugin-alias 的插件。用法上有差异但是都是那么一回事。...举个例子: 例如 webpack 中最为常用的就是 HtmlWebpackPlugin ,而在 vite 里面使用一个 @rollup/plugin-html 插件 ,他们在逻辑上都是一样的的东西创建和引入和静态资源

    2.2K91

    【从零到一手撕脚手架 | 第一节】配置基础项目结构 Vite + TypeScrpit + Vue3 初始化项目

    GitHub:LonelySnowman/sv3-template 官方文档:SV3-Family | Vue3 前置知识:Vue全家桶,了解Vite或WebPack等构建工具,Node.js 您将收获到...:从零到一构建一个规范的 Vue3+TS+Vite 脚手架 项目使用的依赖: 使用 Vite 进行项目构建 使用 TypeScript 使用 Sass 编写样式 对 pinia,vue-router,axios...Vite就可以做到这些事情,接下来教大家配置Vite帮助我们构建项目。.../nprogress vue-tsc vite:项目构建工具 @vitejs/plugin-vue:使vite能够编译vue组件 @vitejs/plugin-vue-jsx:使vite能够编译jsx组件.../client", "element-plus/global"], // 编译的时候删除注释 "removeComments": true, // 使用绝对路径时使用

    1.5K10

    什么是前端工程化❓

    在终端中输入以下命令: npm create vite@latest my-project --template vue 或者如果你倾向于使用yarn,则是: yarn create vite my-project...--template vue 上述命令会使用最新的Vite版本创建名为my-project的项目,并自动选择Vue3模板。...集成测试与端对端测试:Cypress或Playwright提供完善的E2E测试解决方案,可以模拟真实用户的浏览路径,验证整个应用程序的功能完整性和响应性。...此外,可以利用modern image formats(如WebP)和CDN加速静态资源分发。 构建优化:Vite凭借其快速启动和增量编译的优势,已大幅减少了构建耗时。...部署与运维 - 实战指导 CI/CD实践:在GitHub Actions或GitLab CI中配置.yml文件,设置Vite的构建命令以及部署脚本,确保每次合并到主分支时都会自动构建生产环境的静态资源并发布到服务器

    10510

    使用Node构建一个高效的静态文件服务器

    背景 作为前端工程师,我想大家一定对静态文件服务器不会陌生。所谓的静态文件服务器做的工作就是将我们的前端静态文件(.js/.css/.html)传输给浏览器,然后浏览器再将我们的页面渲染出来。...我们常用的webpack-dev-server就是本地开发用的静态文件服务器,而一般线上环境我们会使用nginx,因为它更加稳定和高效。既然静态文件服务器无处不在,那么它们又是如何实现的呢?...这里值得一提的是:由于客户端需要按照返回的子资源信息进一步访问子资源,所以我们需要记录子资源相对于根目录的相对路径。...我们知道一般来说服务器的静态文件是很少会改变的,在服务端资源没有发生改变的前提下,同一个客户端多次访问同一个资源,服务端会传输一样的数据,而这种情况下更有效的方式是:服务器告诉客户端资源没有变化,你直接使用缓存就可以了...总结 本篇文章我先实现了一个最简单能用的静态文件服务器,然后通过解决三个实际使用时会遇到的问题优化了我们的代码,最后完成了一个简单高效的静态文件服务器。

    1.5K20

    ​我修复了一个 Vite Bug,让我的项目首屏性能提高了 25%

    这里我们可以通过设置 DEBUG 环境变量,来输出更多的关于依赖构建相关的日志:# vite:deps 是指过滤出依赖预构建的日志# force 代表不使用之前构建的缓存,以确保每次都能复现问题cross-env...import 语句,就把 import 的内容记录下来,例如 import Vue,就记录 Vue 到数组中最后只留下实际路径为 node_module 中的依赖,这些代码就是第三方依赖。...整个项目中,除了 router.ts 中使用 glob 特性进行引入模块外,其他模块均使用静态 import 或动态 import 语句引入模块。...Login.vue,Login.vue 下的依赖被 Vite 发现,但 base.ts 等模块及其嵌套使用的依赖,并没有被扫描到第一次依赖预构建完成访问页面,执行时,请求 router.ts 页面,router.ts...base.ts 代码,请求静态 import Layout.vue ,Vite 发现新依赖 echarts/charts 等, 重新执行依赖预构建第二次依赖预构建完成浏览器执行 base.ts 的代码

    1.4K31

    重构于 Vite:我如何做 SSG、静态资源发布以及自动化部署

    回到项目里,只需要在 vite.config.ts[40] 里修改 base 的路径即可。 export default defineConfig({ base: isDev ?...PicGo 图床界面 你可以在 Github 仓库上的 Releases[43] 下载最新的客户端版本,只是使用的话,可以单独下载对应系统的安装文件,不需要克隆整个仓库下来自己构建。...离线应用构建 使用 Vue-CLI 创建新项目的时候,可以了解到有一个选项是关于 PWA 的,关于 PWA 的定义建议直接阅读 渐进式 Web 应用(PWA) | MDN[58] 。...不过目前发现了一个问题就是,当 vite.config.ts 的 base 选项设置为 CDN 地址时,构建出来的 PWA manifest 资源路径会读取错误,原因是 manifest 不能走 CDN...关于 PWA 的配置可以参考我的项目,这里单独说一下需要特别注意的点: 因为使用了 CDN,所以 scope 和 manifest.start_url 选项需要显式指定,否则资源会读取出错 基于我上面提到的路径问题

    3.2K50

    Vite 4.3 为何性能爆表?(第一次知道 Node 竟还有这个冷门性能问题...)

    避免重新创建正则表达式 Vite 需要许多正则表达式来匹配字符串,其中大多数都是静态的,所以最好只使用它们的单例。 Vite 4.3 优化了正则表达式,这样就可以重复使用它们。 4....4. package Vite 4.3 打破了解析 node_modules 包数据的性能瓶颈。 Vite 4.2 使用绝对文件路径作为包数据缓存键。...Vite 4.3 不仅使用绝对路径,比如 /root/node_modules/pkg/foo/bar.js 和 /root/node_modules/pkg/foo/baz.js,还使用遍历的目录作为...并行化 并行化始终是获取更好性能的不错选择。 在 Vite 4.3 中,我们并行化了若干核心功能,包括但不限于导入分析、提取 deps 的导出、解析模块 url 和运行批量优化器。...基准测试生态系统 vite-benchmark:Vite 使用此仓库来测评每个提交的跑分,如果您正在使用 Vite 开发大型项目,我们很乐意测试您的仓库,以获得更全面的性能。

    19510
    领券