vite配置@提示

最新推荐文章于 2025-04-28 08:50:03 发布

一笑boom

最新推荐文章于 2025-04-28 08:50:03 发布

阅读量298

点赞数 2

文章标签：前端

本文链接：https://blog.youkuaiyun.com/wang1811539550/article/details/145934766

版权

新建jsconfig.json

// An highlighted block
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
          "@/*": ["src/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
 }

vite.config.js添加

 resolve: {
      alias: {
        "@": "/src",
      },
    },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一笑boom

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Electron】Vite+Ts 项目内配置路径别名 “@/“

m0_64494670的博客

01-03

2680

[plugin:vite:import-analysis] Failed to resolve import "@/components/HelloWorld.vue" from "src\App.vue". Does the file exist? C:/Users/ttatt/Desktop/te/getLive/gitee/webElectron/src/App.vue:2:23 1 | import { defineComponent as _defineComponent } from "vu

配置vite配置文件更改项目端口、使用@别名

m0_74356429的博客

04-03

2199

是 Node.js 的核心模块之一，用于处理文件路径的操作。它提供了一些方法，用于在不同操作系统上正确解析、拼接和转换文件路径，以及获取路径的各个部分（目录名、文件名、扩展名等）。@types/node 包允许您在TypeScript项目中使用Node.js的核心模块和API，并提供了对它们的类型检查和智能提示的支持。比如安装之后，就可以导入nodejs的 path模块，在下面代码。2. 在vite.config.ts里面配置resolve。导入的时候就可以使用@别名导入了。

参与评论您还未登录，请先登录后发表或查看评论

vite 中使用 @ ，配置路径别名

最新发布

qq_29715355的博客

04-28

697

在Vue3 - Vite项目开发中，当导入组件时，可能会遇到路径过长的问题，如。为了简化路径，我们通常会使用别名来替代src目录，例如使用作为src的别名，这样就可以写成。然而，在实际配置过程中，可能会出现别名配置不生效的情况。

vite.config.js配置@

范天缘的博客

05-07

1282

使用vue3+vite搭建了一个新项目,这里需要配置一下@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' //这个要引入 // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], //新增加的 resolve:{ alias:{ '@

vite配置

qq_47040462的博客

07-03

5046

主要配置有：root(源文件路径)、define（全局常量）、resolve（模块解析）、base(静态文件路径)等。以下也是常用的配置（实际根据具体项目而定）

vite中配置@别名

10-01

922

使用@代替src目录。

vite中配置别名@

weixin_54607676的博客

01-25

1199

请安装 pnpm add @types/node -D。可能会遇到path模块找不到的问题。

Ts+Vite脚手架使用‘@‘作为src根目录的方法

shiqing4387的博客

06-20

1281

如何在vite脚手架中使用@代替src根目录

【React】vite + react 项目，配置项目路径别名 @

Eliaukoyx

03-28

3747

为了方便使用，希望使 @ 符号代表 src 文件路径，因此需要在项目中配置路径别名。下面介绍，如何在 vite + react 的项目中配置项目路径别名@

vue3+vite+ts 配置别名@报错找不到模块

weixin_43754395的博客

11-30

4636

vue3+vite+ts配置别名@报错

React搭建Vite项目及各种项目配置

越陌度阡

07-23

3862

创建Vite项目，在操作系统的命令终端，输入以下命令：yarn create vite，输入完成以后输入项目名称、选择开发框架，选择开发语言，如下图所示，即可完成项目创建。注意事项：1. Node版本必须符合要求，否则安装过程中会提示版本不对；2. 由于上面是使用的yarn来安装的，所以需要首先通过npm来全局安装yarn......

vite 配置@路径

shoping110的博客

05-17

1751

vite 配置@路径

vite配置@路径以及vue识别@

sdad2154的博客

08-18

962

3、看看有没有jsconfig.json文件，没有就新建一个，然后把代码粘贴进入，配置就完成了。找到vite.config.js 文件。如果第二步__dirname不识别。

vite “@”路径选择配置

qq_41615727的博客

10-20

945

首先需要在配置文件vite.config.ts添加代码。然后再去tsconfig.json文件添加。

vite项目配置@跟目录(React同样)

weixin_68530407的博客

09-14

1457

引入path时报错可能是缺少依赖。

vite@别名配置

qq_48109675的博客

02-14

407

两步搞定

vite基本配置

weixin_45732091的博客

07-18

748

vite.config.js基本配置。

vite项目构建配置

qq_47040462的博客

07-30

1100

使用npm create vite@latest构建项目，配置项选项react->ts+SWC即可。让后打开项目npm i。

vue3 vite配置@为

03-29

### Vue3 和 Vite 配置 `@` 路径别名为了在 Vue3 和 Vite 项目中配置路径别名 `@` 来替代 `src` 文件夹的路径，需要完成以下几个方面的设置： #### 1. 安装必要的依赖由于 Vite 使用 Node.js 的内置模块 `path` 进行路径解析，而 TypeScript 默认不识别这些模块，因此需要安装类型声明文件 [@types/node][^1]。 ```bash yarn add @types/node -D ``` --- #### 2. 配置 `vite.config.ts` 通过引入 `defineConfig` 和 `resolve` 方法来定义路径别名。以下是完整的 `vite.config.ts` 配置代码[^1]: ```typescript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": path.resolve(__dirname, "./src") // 将 '@' 映射到项目的 src 目录 } } }); ``` 或者可以使用数组形式指定路径别名[^3]： ```typescript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { resolve } from "path"; export default defineConfig({ plugins: [vue()], resolve: { alias: [ { find: "@", replacement: resolve(__dirname, "./src"), }, ], }, }); ``` 注意：每次修改 `vite.config.ts` 后都需要 **重启开发服务器** 才能使更改生效[^2]。 --- #### 3. 更新 `tsconfig.json` 为了让 TypeScript 编译器理解新的路径别名，在 `tsconfig.json` 中添加 `baseUrl` 和 `paths` 属性： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] // 将 '@/' 替换为 'src/' } } } ``` 此配置告诉 TypeScript 当遇到以 `@/` 开头的导入语句时，将其替换为相对于 `src` 文件夹的实际路径。 --- #### 4. 测试路径别名假设有一个组件位于 `src/components/ExampleComponent.vue`，可以通过以下方式导入它： ```javascript import ExampleComponent from '@/components/ExampleComponent.vue'; ``` 这会自动解析为 `src/components/ExampleComponent.vue`。 --- ### 总结以上步骤涵盖了从安装必要依赖、配置 `vite.config.ts` 到更新 `tsconfig.json` 的全过程。确保每一步都正确执行，并在完成后重新启动开发环境以应用新配置。 ---