vue3为路径设置别名

已于 2022-07-14 16:36:42 修改
阅读量2.5k 收藏 1
点赞数 2
文章标签： vue
于 2022-04-14 10:55:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/infantttttt/article/details/124166340
版权

为了避免代码中出现类似’…/…/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’。
在这里插入图片描述

DifferentWorldforMe
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias 中增加别名 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } } 3.vue-cli 3x 配置 // 在根目录下创建vu
【Vue3-Vite】Vite配置--路径别名配置
一位前行者的博客
09-07 931
vue3-vite路径别名配置 使用 @ 代替 src，因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置。官方教程: https://cn.vitejs.dev/guide/env-and-mode.html。本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。使用 @ 代替 src。
vue3 使用vite 创建路径别名
最新发布
GGXO619的博客
02-22 192
安装pnpm install @types/node -D，否则path路径飘红。
vue3中，别名路径联想设置
小白前端
12-17 492
这样，就能实现输入@显示所有根目录下面文件的需求。
Vue3基础(19)___vite.config.js中配置路径别名
见贤思齐焉，见不贤内自省
07-17 3319
在vite.config.js中配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const path = require('path') export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "./src/assets/js"), }
Vue3src 路径别名`@`的配置vite.config.ts,tsconfig.json
jieweiwujie的博客
02-15 249
这个有好几种写法都可以实现配置，下面可以看看这些写法。
Vue CL3 配置路径别名详解
10-16
主要介绍了Vue CL3 配置路径别名详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
关于VUE3的路径别名的配置（vite + webstorm）
k1_maple的博客
05-10 2074
​在使用I-view提供的工程框架后，发现我的@路径在webstorm编辑器中无法被识别了，所以要记录下这次问题。
Vue3-路径别名alias配置
One is never too old to learn
03-21 5346
vue3 alias配置
vue3配置@别名
如果相遇，那么你好哦~
11-13 1318
在项目开发中，通常我们是不写相对路径的，因为有些文件需要在不同的文件中使用，如果使用相对路径，那么我们每次去CV路径的时候就要重新修改。因此通常我们是写跟路径的，但是从头开始又太过于麻烦，因此我们使用 @ 别名来省略前面的路径。
Vue3---别名路径配置
weixin_52053631的博客
07-02 489
创建jsconfig.json配置文件：这个配置只做联想提示。vite.config.js配置文件中才做实际的路径转换。
vscode中Vue别名路径提示的实现
10-15
主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3配置路径别名
weixin_45663697的博客
10-14 295
vue文件路径引用简写 当我们需要引用被多级文件夹嵌套的文件时，需要用到很多../../，使得引用路径看起来非常繁琐，这时我们可以采用简写模式 在build文件夹中找到webpack.base.conf.js，在找到resolve:{}对象 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, 其
vue-cli 3.0 中 vue.config.js 配置路径别名
热门推荐
yun_hou的博客
01-17 1万+
 vue-cli 2.x 版本创建项目时，我们可以在 build 文件夹下找到 webpack.base.conf.js 文件，在里面修改 resolve.alias 即可 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', ...
（配置）vue3项目配置路径别名
次顶级的博客
12-13 710
vue3项目配置路径别名
基于vue-cli3的路径别名配置
巴黎的雪铺满赫尔本的街的博客
03-13 178
1.在项目在外层新建一个vue.config.js文件代码如下： var path=require('path')//引入path模块 function resolve(pathUrl){//设置绝对路径 return path.resolve(__dirname,pathUrl) } module.exports={ configureWebpack: (config) => {...
【Vue3】如何通过vite.config.js配置中的resolve来设置路径别名？（已解决，图文+代码）
【敦厚的曹操】的专栏
12-31 1096
如何通过vite.config.js配置中的resolve来设置路径别名？（已解决，图文+代码）
vue-cli3+工具中，配置路径别名(vue.config.js)
qq_42859450的博客
08-03 162
https://www.cnblogs.com/qianxiaox/p/14019457.html
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 3819
问题描述 当前项目，我们采用vue-cli脚手架搭建的vue3+ts项目，组织完模块之后，发现模块太多了，如果需要默认使用@去代表src目录就会显得比较臃肿和复杂 ，所以我需要对一些常用的模块进行别名设置 解决方法 1.设置vue.config.js 首先对路径进行组装，之后通过alias设置别名 这里我配置的@components代表组件 const { defineConfig, } = require("@vue/cli-service"); const path = require("pat
vue3 vue.config.js配置路径别名
07-15
### 回答1： 在Vue.js 3中，我们可以使用vue.config.js文件来配置路径别名。路径别名可以让我们在导入模块时使用自定义的快捷方式。 首先，在项目的根目录下创建vue.config.js文件，如果该文件已存在可以跳过此步骤。 然后，打开vue.config.js文件，我们需要使用module.exports导出一个对象。具体的配置如下： module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src') // 这里的'@'表示src目录的绝对路径 } } } } 在这个配置中，我们使用resolve.alias来配置路径别名。在这个例子中，我们将'@'符号配置为src目录的绝对路径，这样在代码中导入模块时，我们可以使用'@'符号来代替src目录的路径。 例如，如果我们有一个名为HelloWorld.vue的组件文件在src/components目录下，我们可以在其他组件中使用以下方式导入它： import HelloWorld from '@/components/HelloWorld' 这样，在代码中使用路径别名可以让我们更方便地引用和管理模块路径，提高开发效率。 ### 回答2： 在Vue3中，我们可以通过修改vue.config.js文件来配置路径别名。路径别名允许我们在引用文件时使用简短的别名而不是完整的路径。 首先，在项目根目录下创建一个vue.config.js文件。如果该文件已存在，则直接打开。 然后，在vue.config.js文件中添加以下代码： ``` const path = require('path'); module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, 'src'), // 添加其他路径别名 // 比如：'@components': path.resolve(__dirname, 'src/components') }, }, }, }; ``` 以上代码中，我们使用了Node.js的path模块来处理路径，我们先导入了path模块。 然后，在configureWebpack配置中，我们使用resolve对象来配置路径别名。alias字段表示路径别名，它是一个对象，包含我们定义的别名。 @代表src目录的路径。这样我们就可以在引用文件时使用@代替src，例如import App from '@/App'。 如果你还想添加其他路径别名，可以继续在alias对象中添加键值对。键表示别名，值表示目标路径。 最后，将上述代码保存并关闭vue.config.js文件。 现在，我们在Vue项目中就可以使用路径别名了。无论是在组件中还是在其他文件中引用，我们都可以使用别名来代替完整的路径，使代码更加简洁易读。 ### 回答3： 在Vue3中，我们可以通过配置vue.config.js文件来设置路径别名。 首先，我们需要在项目根目录下创建一个vue.config.js文件。如果该文件已存在，可以直接编辑它。 然后，在vue.config.js文件中添加如下代码： ```js const path = require('path'); module.exports = { chainWebpack: (config) => { config.resolve.alias .set('@', path.resolve(__dirname, 'src')) // 设置@别名，将src目录路径映射为@ .set('components', path.resolve(__dirname, 'src/components')) // 设置components别名，将src/components目录路径映射为components .set('views', path.resolve(__dirname, 'src/views')) // 设置views别名，将src/views目录路径映射为views // 可以继续设置其他路径别名 }, }; ``` 以上代码中，我们使用了Node.js的path模块来处理路径，需要先通过require引入。 然后，我们使用了chainWebpack配置项来进行路径别名的设置。其中，config.resolve.alias用于设置路径别名，set方法用于给别名起名，并传入对应的路径。 在上述代码中，我们添加了三个路径别名，分别是`@`、`components`和`views`。其中`@`代表项目根目录下的src目录，`components`代表src目录下的components目录，`views`代表src目录下的views目录。 你可以根据需要设置其他路径别名，只需修改set方法中的别名和路径即可。 配置完vue.config.js后，保存文件并重新运行项目，就可以在Vue组件中使用路径别名了。例如，要引入src目录下的一个组件，可以这样写：`import Example from '@/components/Example';`

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值