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

原创 已于 2024-07-25 06:14:00 修改 · 778 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #vite #vitepress #路径别名

于 2024-07-15 22:10:19 首次发布

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

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

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

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

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

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

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

  5. vitepress的demo-preview模块中

最低0.47元/天 解锁文章
Vue--》超详细教程——vite脚手架的搭建与使用
ztK63LrD的博客
12-29 5229
我们要知道Vue是有两个开发者工具的，分别适配Vue2和Vue3，之前在学习Vue2时使用的工具仅限于Vue2使用，在Vue3项目中是不能进行使用的，所有我们还是需要单独安装一个适配Vue3的开发者工具。安装完成打开了开发者模式，小伙伴可能会发现，浏览器的右上角没有Vue插件的标志啊，只需如下操作即可。在工程化的项目中，vue要做的事情很简单，通过main.js把App.vue渲染到index.html的指定区域中。当然你也可以同时打开2和3的工具，用哪个版本的Vue，哪个版本的vue开发者工具就是亮。
Vite脚手架搭建并创建一个VUE3的项目
m0_67926566的博客
07-13 638
1、搜索node.js进入node.js官网或node.js中文网2、点击下载windows .msi64位安装包(下载前注意自己电脑系统的版本，这里是windows10)3、打开安装包进入安装程序,根据以下流程进行node.js的安装注意下面划红线的框需要勾选！！！4、进入控制台输入node -V（中间有空格）检查node.js是否安装成功7、选择vue8、回车创建项目根据Now run提示流程进行项目的启动cd 项目名npm installnpm run dev显示如下页面（有特殊需求的依赖插件自己在v
vite配置项目路径别名
conyu_的博客
09-09 1114
types/node内部包含了对Node.js 核心模块及常用第三方库的类型信息描述，增加了TypeScript 对 Node.js 环境的支持。注意：是在tsconfig.json的compilerOptions字段里配置。这一步其实是让编辑器有提示。
vitepress：vitepress测试
02-20
Vitepress测试 :cat:
配置vite配置文件更改项目端口、使用@别名
m0_74356429的博客
04-03 2328
是 Node.js 的核心模块之一，用于处理文件路径的操作。它提供了一些方法，用于在不同操作系统上正确解析、拼接和转换文件路径，以及获取路径的各个部分（目录名、文件名、扩展名等）。@types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。比如安装之后，就可以导入nodejs的 path模块，在下面代码。2. 在vite.config.ts里面配置resolve。导入的时候就可以使用@别名导入了。
Vite - 配置 - 文件路径别名的配置
northcastle的博客
11-18 2915
vite 中的别名配置
Vite中配置路径别名
web15870359587的博客
02-23 2026
Vite中配置路径别名 刚接触vite+vue3的项目, 配置路由的时候不想通过…/…/访问, 想配置一个路径别名,踩坑 vite中配置别名和vue2的配置别名大差不差 但是会有版本的区别 首先初始化一个vue3+vite的项目,新建一个vite.config.js 在项目中引入基于nodejs的path模块 先引入path模块 const { resolve } = require(‘path’) 添加如下代码 将项目中静态src路径修改为/@/ (重启项目即可配置成功) resolve: { a
vite 脚手架搭建 vue3 项目
jiangjunyuan168的博客
01-30 2706
步骤： 1、win+r，输入 cmd 进入命令提示符窗口 2、cd 到项目需要存放的目录 3、进入目录后，使用以下命令搭建项目（这里以npm为例）...
（react+ts）vite项目中的路径别名的配置
LQlove1的博客
10-24 1449
【代码】（react+ts）vite项目中的路径别名的配置。
在vite中配置路径别名
jhfvuyhgui的博客
07-12 6031
在vite创建的项目中使用@
Vite如何配置路径别名
qq_45064834的博客
09-14 7346
Vite | Vite配置路径别名TypeScript检查报错 ｜ TypeScript
Vite 配置路径别名：简化前端项目中的模块引入
最新发布
whhhhhhhhhw的博客
07-17 462
在开发前端项目时，我们经常需要引入各种模块、组件或工具函数。随着项目规模的增长，文件层级越来越深，使用相对路径（如 ../../../components/Home.vue ）会变得繁琐且难以维护。路径别名就可以解决这个问题，它允许我们为常用目录设置简短的别名（比如使用@代表 /src ），从而让代码更简洁，更易读。
vite配置模块路径别名
ChrisWF的博客
02-14 454
vite配置模块路径别名
vite 中使用 @ ，配置路径别名
热门推荐
潇似风的博客
12-08 1万+
vite 配置路由别名， 使用@
vite路径别名配置
weixin_46309278的博客
12-13 513
vite路径别名配置
Vite+TS项目中配置路径别名
qq_46032105的博客
02-08 717
本文介绍了如何在Vite+TypeScript项目中配置路径别名。关键步骤包括：1)安装@types/node依赖；2)在vite.config.ts中配置resolve.alias，支持对象和数组两种方式；3)在tsconfig.json中配置paths映射；4)使用别名导入模块。配置完成后需重启开发服务器，该方案能有效简化模块导入路径，提升代码可读性和维护性。
Vite 配置路径别名
dhp1994的博客
10-29 430
因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，在 tsconfig.json 中配置。安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。同样还是 import path from 'path'配置路径别名提示 tsconfig.json。
vite脚手架搭建项目
06-25
### 使用 Vite 搭建项目的步骤 #### 1. 初始化项目 使用 `npm` 或 `yarn` 初始化一个新的项目是创建 Vite 项目的第一步。可以通过以下命令快速生成一个基础的 `package.json` 文件： ```bash npm create vite@...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Java小卷

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

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

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

打赏作者

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

抵扣说明：

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

余额充值