vue3为路径设置别名

已于 2022-07-14 16:36:42 修改
阅读量2.6k 收藏 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 CL3 配置路径别名详解
10-16
主要介绍了Vue CL3 配置路径别名详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli 为项目设置别名的方法
12-13
1.使用场景：在项目开发过程中经常需要引入各种文件，例img，css，js等，我们可以在vue-cli中给不同目录设置别名，方便我们使用 2.vue-cli 2x 配置 // 在 webpack.base.config.js中的 resolve 配置项，在其 alias ...
Vue3-路径别名alias配置
One is never too old to learn
03-21 5442
vue3 alias配置
Vue中src别名的配置“@”
最新发布
qq_63497385的博客
06-03 253
在 Vue 项目中，特别是在使用 Vue CLI 创建的项目中，@ 符号通常被用作 src 目录的别名。这意味着你可以在项目中的任何地方通过 @ 快速引用 src 目录下的文件，而不是每次都写完整的相对路径。要在 Vue 项目中配置 @ 符号作为 src 目录的别名，你通常不需要手动修改任何配置文件，因为 Vue CLI 已经为你做了这个设置。但是，如果你想要了解这个别名是如何设置的，或者如何在其他构建工具（如 Webpack）中手动设置它，以下是一些基本的步骤和概念。
基于vue-cli3的路径别名配置
巴黎的雪铺满赫尔本的街的博客
03-13 185
1.在项目在外层新建一个vue.config.js文件代码如下： var path=require('path')//引入path模块 function resolve(pathUrl){//设置绝对路径 return path.resolve(__dirname,pathUrl) } module.exports={ configureWebpack: (config) => {...
【Vue3-Vite】Vite配置--路径别名配置
一位前行者的博客
09-07 1015
vue3-vite路径别名配置 使用 @ 代替 src，因为 typescript 特殊的 import 方式 , 需要配置允许默认导入的方式，还有路径别名的配置。官方教程: https://cn.vitejs.dev/guide/env-and-mode.html。本地安装 Node 的 TypeScript 类型描述文件即可解决编译器报错。使用 @ 代替 src。
Vue3 设置文件别名【vue-cli、tsconfig.json】
qq_22841387的博客
03-15 3882
问题描述 当前项目，我们采用vue-cli脚手架搭建的vue3+ts项目，组织完模块之后，发现模块太多了，如果需要默认使用@去代表src目录就会显得比较臃肿和复杂 ，所以我需要对一些常用的模块进行别名设置 解决方法 1.设置vue.config.js 首先对路径进行组装，之后通过alias设置别名 这里我配置的@components代表组件 const { defineConfig, } = require("@vue/cli-service"); const path = require("pat
Vue3-33-路由-路由的别名配置 alias
northcastle的博客
01-03 1472
vue3 中路由的别名配置使用案例
vscode中Vue别名路径提示的实现
10-15
主要介绍了vscode中Vue别名路径提示的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue.config.js中配置Vue的路径别名的方法
10-15
Vue CLI提供了一个名为`vue.config.js`的配置文件，允许我们自定义项目的构建设置，其中包括配置路径别名。以下将详细介绍如何在`vue.config.js`中设置Vue的路径别名。 首先，我们需要在项目的根目录下创建或编辑`...
Vue中快捷路径的设置（src的别名）
m0_65262198的博客
04-07 1063
我们在vue在组件中以及js文件中经常会应用src目录下的一些文件或者资源，最常见的办法就是一层一层的../../去转出文件夹寻找所需资源所在的路径。 可以通过设置一个标识来代表src目录 之后需要到src目录下应用资源书写路径可以直接通过标识/来查询 下列就是设置代码： 我们首先新建一个文件根目录下新建一个文件jsconfig.json 在内写以下代码： { "compilerOptions": { "baseUrl": "./", "paths": { "@..
vue3中，别名路径联想设置
小白前端
12-17 580
这样，就能实现输入@显示所有根目录下面文件的需求。
小白系列Vite-Vue3-TypeScript：002-配置别名
总得学点什么的博客
02-07 1357
小白系列Vite-Vue3-TypeScript：002-配置别名
前端笔记(8) Vue3+Vite 搭建项目 配置路径别名@
Java Spring Elasticsearch
08-10 3412
如果上面的npm run dev可以将项目运行，那么说项目创建没有问题，可以继续安装一些我们常用的依赖包了。在compilerOptions中添加下面的最后2项：“baseUrl"和"paths”在main.ts中引用一个组件，验证下是否会报错，并最后运行项目看能否正常启动。......
vue-cli3配置路径别名
xiaoge_586的博客
12-28 848
vue.confg.js中添加配置 找到根目录下vue.confg.js中添加如下配置代码片段，如果没有这个文件，在根目录重新创建一个 const path = require("path"); function resolve(dir) { return path.join(__dirname, dir); } // vue.config.js 常⽤配置 module.exports = { chainWebpack: config => { config.reso
三、Vue中设置路径别名
panchang199266的博客
05-12 5556
一：问题   在 CSS 或者 JS 中，有时候需要引入其他相关文件，若目录层级比较多，那么路径会相当长，而且重复书写，比较麻烦。为了解决这个问题，我们可以采用为路径设置别名的方式，来简化路径书写。 二：设置别名步骤 下例是使用 vue-cli3.0构建项目，步骤如下： 1.新建 vue.config.js 文件，和package.json同层级 const path = require('pat...
vue 项目给路径配置别名、统一代码风格配置
Mark
10-30 1278
目录 1、给路径配置别名 3、开发代码统一风格配置 用 vue-cli3 搭建的项目的相关配置会放到项目的 node_modules 的文件夹下，如果直接去 node_modules 修改配置不仅不方便，后期还会出现一些问题，所以像是给文件路径起别名、配置开发代码的风格等配置，一般都是直接在项目根目录下新建相关的配置文件。 1、给路径配置别名 给路径配置别名，一般会在项目根目录下新建一个...
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-vue.config.js-配置别名
超级氯化钾的博客
04-27 801
//会和项目公共的配置进行合并 module.exports = { configureWebpack: { resolve: { extensions: [], alias: { // '@': 'src' 内部已经配置了这个 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network'
vue3+vite配置路径别名@
05-07
在 Vue3 和 Vite 中，可以通过配置路径别名来简化模块导入的路径。配置路径别名的方式如下： 1. 在项目根目录下创建 `vite.config.js` 文件（如果没有的话）。 2. 在 `vite.config.js` 文件中添加以下代码： ``` const path = require('path'); module.exports = { resolve: { alias: { '@': path.resolve(__dirname, './src'), }, }, }; ``` 上述代码中，我们定义了一个 `@` 路径别名，指向项目的 `src` 目录。 3. 在项目中使用路径别名： 在项目中使用路径别名时，只需要在导入模块时使用别名即可。例如： ``` import HelloWorld from '@/components/HelloWorld.vue'; ``` 这里使用了 `@` 别名，它指向了项目的 `src` 目录。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值