vite脚手架搭建vitepress路径别名设置

已于 2024-07-25 06:14:00 修改
阅读量650 收藏
点赞数 5
CC 4.0 BY-SA版权
分类专栏： Vue3开源组件实战 文章标签： vue.js vite vitepress 路径别名
于 2024-07-15 22:10:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/felix_alone2012/article/details/140449551

在用vite脚手架进行vue组件库开发过程中，我们希望引入工程内文件时可以采用路径别名的方式来取代相对路径的繁琐写法。为此我们可以配置路径别名。

下面是一个示例，我们会在vite应用以及整合的vitepress模块中均采用路径别名@来简化文件路径的引入方式。

下面是几个应用@路径别名的地方：

  1. 应用中的vue组件文件中
    在这里插入图片描述

  2. 应用入口main.ts中
    在这里插入图片描述

  3. vitepress的模板配置中
    在这里插入图片描述

  4. vitepress的md文件中
    在这里插入图片描述

  5. vitepress的demo-preview模块中

最低0.47元/天 解锁文章
vue3使用vite设置 @ 路径别名指向src 目录
码农键盘上的梦
10-31 1931
注意：如果你使用的是 TypeScript，需要确保你的项目已经正确设置了 TypeScript 相关的配置文件。在 Vite 中，@ 符号通常用于路径别名（path alias），它可以帮助你更方便地管理项目中的相对路径。例如，你可以设置 @ 别名指向你的 src 目录，这样在整个项目中引用源代码文件就会更加简洁。如果你是在 Vue 项目中使用 Vite，确保你也安装了相应的 Vue 插件。确保你已经在你的项目中安装了 Vite，并且正确地设置了你的开发环境。现在你可以在你的 Vue3 项目中使用。
vitePress实现原理(四)
weixin_44730244的博客
02-13 340
本质其实就是搭建一个vite静态服务器，针对所有html文件做拦截，进行二次封装。通过读取.vitepress/config.ts配置转化基本vitepress配置等等，创建markdown插件扩展markdown文档能力。创建vitepress插件对md文件和vue文件做处理。大家这时肯定好奇，怎么没有路由呢？
Vue3 Vite配置路径别名@ 路径重写 路径简化
最新发布
生产队的驴
05-16 226
【代码】Vue3 Vite配置路径别名@ 路径重写 路径简化。
vite配置项目路径别名
conyu_的博客
09-09 932
types/node内部包含了对Node.js 核心模块及常用第三方库的类型信息描述，增加了TypeScript 对 Node.js 环境的支持。注意：是在tsconfig.json的compilerOptions字段里配置。这一步其实是让编辑器有提示。
Vite - 配置 - 文件路径别名的配置
northcastle的博客
11-18 2766
vite 中的别名配置
Vite中配置路径别名
web15870359587的博客
02-23 1984
Vite中配置路径别名 刚接触vite+vue3的项目, 配置路由的时候不想通过…/…/访问, 想配置一个路径别名,踩坑 vite中配置别名和vue2的配置别名大差不差 但是会有版本的区别 首先初始化一个vue3+vite的项目,新建一个vite.config.js 在项目中引入基于nodejs的path模块 先引入path模块 const { resolve } = require(‘path’) 添加如下代码 将项目中静态src路径修改为/@/ (重启项目即可配置成功) resolve: { a
在vite中配置路径别名
jhfvuyhgui的博客
07-12 5961
在vite创建的项目中使用@
Vite如何配置路径别名
qq_45064834的博客
09-14 7269
Vite | Vite配置路径别名TypeScript检查报错 ｜ TypeScript
vite 中使用 @ ，配置路径别名
热门推荐
潇似风的博客
12-08 1万+
vite 配置路由别名， 使用@
vite路径别名配置
weixin_46309278的博客
12-13 471
vite路径别名配置
Vite+TS项目中配置路径别名
qq_46032105的博客
02-08 577
在使用 Vite 和 TypeScript 的项目中配置路径别名，可以简化模块导入路径，提高代码的可读性和维护性。
Vite 配置路径别名
dhp1994的博客
10-29 376
因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，在 tsconfig.json 中配置。安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。同样还是 import path from 'path'配置路径别名提示 tsconfig.json。
【Vue3-Vite】Vite配置--路径别名配置
09-07 1173
vue3-vite路径别名配置 使用 @ 代替 src，因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置。官方教程: https://cn.vitejs.dev/guide/env-and-mode.html。本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。使用 @ 代替 src。
【Vue】vite配置 @ 路径别名
m0_62719309的博客
08-22 707
vite 配置 @ 路径别名
vite.config.js配置路径别名@
2301_79568779的博客
10-23 915
以下是详细的步骤来配置路径别名。
关于vite 配置路径别名@一些记录
weixin_42776027的博客
07-23 495
然而，Vite 的配置有一定的灵活性，尤其是在早期版本中，某些配置项可能在主配置对象中直接使用仍然能够被识别。: 你的 IDE 或 TypeScript 类型定义可能没有严格遵循 Vite 的最新规范，因此没有给出警告或错误。: 你可能有自定义的配置或脚本，它们扩展了 Vite 的默认行为，使得非标准配置仍然可以被识别。然而，为了保持代码的健壯性和未来版本的兼容性，建议遵循 Vite 的官方推荐配置方式，将。: Vite 在某些版本中可能仍然支持旧的配置方式，即使这不是推荐的用法。选项的确应当被放置在。
vite设置文件夹别名
weixin_55555471的博客
03-06 3179
简化路径：通过使用别名，开发者可以用简短的名称代替复杂的相对路径或绝对路径，从而使代码更加简洁和易于理解。避免路径嵌套：在大型项目中，文件和目录可能会嵌套很多层，使用别名可以避免在代码中编写冗长的路径，减少路径引用错误的可能性。统一路径规范：通过定义统一的别名，整个项目可以遵循一致的路径规范，使得代码更加一致和可维护。支持重构：如果项目中的目录结构发生变化，只需要更新别名配置，而不需要修改大量的代码引用。提高开发效率：使用别名可以减少在编辑器中手动输入和查找路径的时间，加快开发速度。
vite脚手架搭建vue3项目
08-28
你可以按照以下步骤使用 Vite 脚手架搭建 Vue 3 项目： 1. 首先，确保你的环境中已经安装了 Node.js（建议使用稳定版本）。 2. 打开终端或命令行工具，并进入你想要创建项目的目录。 3. 运行以下命令安装 Vite（全局安装）： ``` npm install -g create-vite ``` 4. 安装完成后，运行以下命令创建一个新的 Vue 3 项目： ``` create-vite your-project-name --template vue ``` 将 `your-project-name` 替换为你想要给项目起的名字，这个命令会创建一个以该名字命名的文件夹，并在其中构建项目。 5. 进入项目目录： ``` cd your-project-name ``` 6. 安装项目依赖： ``` npm install ``` 7. 最后，运行以下命令启动开发服务器： ``` npm run dev ``` 这将启动一个本地开发服务器，你可以通过在浏览器中访问 `http://localhost:3000` 来查看你的 Vue 3 应用。 现在，你已经成功使用 Vite 脚手架搭建了一个 Vue 3 项目！你可以根据需要进行进一步的开发和配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Java小卷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值