vue3为路径设置别名

原创 已于 2022-07-14 16:36:42 修改 · 2.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

于 2022-04-14 10:55:44 首次发布

为了避免代码中出现类似’…/…/src/assets/img/home.png’包含多个’…/’符号，可以为路径设置别名。
类似上述路径可直接用’@/assets//img/home.png’表示，将直接从src路径开始查找指定文件。（vue3默认将src文件夹重命名为@）

1.找到node_modules/@vue/cli-service/lib/config/base.js文件
在这里插入图片描述
2.找到’.set(‘@’, api.resolve(‘src’))‘（图中已有内容为vue4默认为src路径设置别名@）
在这里插入图片描述
3.添加个人设置（不能使用’@/assets’会报错）。
在这里插入图片描述

添加别名后，上述路径可直接写为‘~assets/img/home.png’。
在这里插入图片描述

Vue3-33-路由-路由的别名配置 alias
northcastle的博客
01-03 2041
vue3 中路由的别名配置使用案例
Vue CL3 配置路径别名详解
10-16
在 Vue CLI 3 中，配置路径别名可以通过 `vue.config.js` 文件实现。 首先，我们需要了解 `vue.config.js` 文件。这是一个可选的配置文件，位于项目根目录下，用来覆盖默认的配置。如果没有这个文件，Vue CLI 会...
关于VUE3的路径别名的配置（vite + webstorm）
k1_maple的博客
05-10 3566
​在使用I-view提供的工程框架后，发现我的@路径在webstorm编辑器中无法被识别了，所以要记录下这次问题。
（配置）vue3项目配置路径别名
次顶级的博客
12-13 846
vue3项目配置路径别名
vue3配置@别名
如果相遇，那么你好哦~
11-13 2211
在项目开发中，通常我们是不写相对路径的，因为有些文件需要在不同的文件中使用，如果使用相对路径，那么我们每次去CV路径的时候就要重新修改。因此通常我们是写跟路径的，但是从头开始又太过于麻烦，因此我们使用 @ 别名来省略前面的路径。
Vue3-路径别名alias配置
never too old to learn
03-21 5828
vue3 alias配置
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias ...
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
vscode中Vue别名路径提示的实现
11-19
当使用 Vue 框架进行项目开发时，在 vue.config.js 中配置好了路径别名后，到其他页面引入组件、引入 css 、引入静态文件路径时，使用路径别名不会智能提示路径。虽然在 vscode 中安装了Path Intellisense 插件，...
vue-cli3配置路径别名
weixin_45663697的博客
10-14 409
vue文件路径引用简写 当我们需要引用被多级文件夹嵌套的文件时，需要用到很多../../，使得引用路径看起来非常繁琐，这时我们可以采用简写模式 在build文件夹中找到webpack.base.conf.js，在找到resolve:{}对象 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, 其
Vue3---别名路径配置
weixin_52053631的博客
07-02 751
创建jsconfig.json配置文件：这个配置只做联想提示。vite.config.js配置文件中才做实际的路径转换。
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 4450
配置路径别名是提高代码可读性和可维护性的有效方法。通过使用路径别名，可以避免长路径引发的混乱，并使代码更加简洁和易于管理。保持一致性和中的别名配置需要一致。测试配置：在实际开发中测试别名配置，确保其能够正确解析路径。文档记录：在项目文档中记录路径别名配置，便于团队成员了解和使用。通过以上步骤，您可以在 Vue 3 + TypeScript 项目中有效地配置和使用路径别名，从而提升开发效率和代码质量。
Vue3中使用resolve进行路径别名设置
驴大毛的博客
12-24 856
本文介绍了在Vue3项目中如何使用resolve设置路径别名
VUE3路径别名
SillyBoy的博客
08-19 1854
路径别名导致的问题 现象一 > vue3_ts@0.0.0 dev /mnt/f/vue3_ts > vite error when starting dev server: Error: The following dependencies are imported but could not be resolved:bash .... 现象二 [vite] Internal server error: Failed to resolve import "@/utils/auth" fr
vue3项目配置别名
fangcaojushi的博客
03-27 848
问题如下，如在router/index.ts中，引入组件 component:()=>import(‘@/views/login/index.vue’),@/*报错。在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！也可尝试手动声明,创建shims-vue.d.ts文件。
vue-cli3中来配置路径别名
逍遥的码农的博客
04-12 628
vue-cli3配置路径别名 在日常开发中， 我们导入文件写的是相对位置， 和绝对位置 但是有些人可能知道@/store 是什么意思， 但是自己启动一个自己的vue项目却发现不可以？？！！ 许多新手 可能不知道 vue.config.js 的vue配置文件， 这个文件得自己创建的，创建到vue项目的根目录下面 将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api // vue.config.js const path = require('p
vue3 + vite + ts 设置 @ 路径别名
qq_43683753的博客
11-22 1474
vue3 + vite + ts 设置 @ 路径别名
ts+vue3项目路径别名
最新发布
08-05
在 Vue 3 项目中配置 TypeScript 路径别名，通常需要同时配置 `vite.config.ts`（或 `vue.config.js`）和 `tsconfig.json` 文件，以确保 TypeScript 编译器和构建工具（如 Vite 或 Webpack）都能识别自定义的路径别名。 ### 配置 vite.config.ts 若使用 Vite 构建工具，可以在 `vite.config.ts` 中导入 `resolve` 并配置别名。以下是一个示例配置： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { resolve } from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, './src') } } }); ``` 此配置使 `@` 指向项目根目录下的 `src` 文件夹，从而可以在项目中通过 `@/components/MyComponent.vue` 这样的方式引用组件[^3]。 ### 配置 tsconfig.json 在 `tsconfig.json` 中，需要设置 `baseUrl` 和 `paths` 来告诉 TypeScript 编译器如何解析别名路径。以下是一个示例配置： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } ``` 此配置确保 TypeScript 能够正确识别 `@/components/MyComponent.vue` 这样的路径并进行类型检查[^4]。 ### 配置 vue.config.js（适用于 Vue CLI 项目） 若使用 Vue CLI 和 Webpack，则需在 `vue.config.js` 中配置路径别名。示例如下： ```javascript const path = require('path'); function resolvePath(...dir) { return path.join(__dirname, ...dir); } module.exports = { chainWebpack: config => { config.resolve.alias .set('@', resolvePath('src')) .set('my-service', resolvePath('src/service/my')); } }; ``` 同时，在 `tsconfig.json` 中配置路径： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "my-service/*": ["src/service/my/*"] } } } ``` 上述配置使得 `@` 和 `my-service` 别名能够在 TypeScript 中被识别[^2]。 ### 总结 - 在 Vite 项目中，配置 `vite.config.ts` 和 `tsconfig.json` 文件。 - 在 Vue CLI 项目中，配置 `vue.config.js` 和 `tsconfig.json` 文件。 - 确保 TypeScript 和构建工具都能识别相同的路径别名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值