vue2.x给路径起别名的配置

最新推荐文章于 2025-04-02 21:21:45 发布
最新推荐文章于 2025-04-02 21:21:45 发布
阅读量1k 收藏
点赞数 1
分类专栏： vue 文章标签： vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/learn_daydayUp/article/details/120719307
版权
本文介绍了在Vue2.x项目中，如何在webpack配置文件中设置别名，以简化静态资源的导入路径。通过修改`webpack.base.conf.js`，可以将相对路径如`../../../static/images/scan.png`替换为`static/images/scan.png`，提高代码可读性和维护性。别名更改后，记得重启项目生效。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue2.x在js里给引入路径起别名的配置：例如

import scan from '../../../static/images/scan.png'

在build=》webpack.base.conf.js里
在这里插入图片描述
2.配置好之后，在页面引用改为

port scan from 'static/images/scan.png'

记得重启项目哦！！！！

vue 添加路径别名
chpswg的专栏
07-17 1151
在vue-cli项目中的的配置文件vue.config.js中添加路径引用别名 1、引入路径 const path = require('path') 2、添加函数 function resolve(dir) { return path.join(__dirname, dir) } 3、添加别名 resolve: { alias: { ...
vue 2.x + @vue/cli 4.x开发阶段使用Vite
m0_44963501的博客
08-14 498
vue/cli 升级 vite 动态菜单vite处理
第二步 Vue2 vue.config.js 基础配置，路径别名alias
mebell的专栏
09-18 3347
vue.config.js是一个用于 Vue 项目的配置文件，用于自定义项目的构建配置。在这个文件中，你可以修改 webpack 相关的选项，以满足你的项目需求。
【前端知识】Vue当中目录别名@的使用
最新发布
wendao76的专栏
04-02 801
目录，这是通过构建工具（如 webpack 或 Vite）的别名（Alias）功能实现的。通过以上配置和使用方法，可以充分发挥。在 Vue 项目中，
vue脚手架配置路径别名
weixin_45805570的博客
03-25 933
vue-cli 项目配置路径别名 vue-cli 2.x配置方式 在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项。 resolve: { extensions: ['.js', '.vue', '.json'], //这个是匹配扩展名的 alias: { '@': resolve('src'), //src解析成@
在Vue项目中，Vue CLI2和Vue CLI3文件路径别名的配置
qq_42498327的博客
03-29 1463
在Vue项目中，Vue CLI2和Vue CLI3文件别名的配置 我们在写Vue项目时，常常会在某个地方引用许多文件，会创建许多文件夹，在引用路径的时候在前面加" . "是非常苦恼的事情，而且代码的阅读性也很差，像下面这样： `import MovieItem from "../../../components/movieitem/MovieItem" 在vue中可以通过配置别名的方式来简化。 ...
代码分析 —— 在vue2.x里设置alias别名
weixin_34409741的博客
04-28 794
1.有关在vue项目中设置别名 在用vue-cli搭建的vue项目中经常会引用各个地方的文件，而在webpack.base.conf.js这个文件里可以为一些常用的目录设置一个简短且易懂的别名。 2.如何设置别名 在webpack.base.conf.js文件中可以找到这样一段代码： resolve: { extensions: ...
vue3.x中使用cesium，vue3.x+Cesium
05-04
你需要添加Cesium的路径别名，以便在代码中直接引用Cesium模块。在`vue.config.js`文件中，添加以下配置： ```javascript module.exports = { configureWebpack: config => { config.resolve.alias = { ......
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
4. **Vue Router 4.x**：Vue Router 4.x 配置路由时，主要涉及`createRouter`和`createWebHistory`方法。路由定义包括 path、component、props、beforeEnter 等选项。还可以使用 `router-link` 和 `router-view` ...
vue2.x笔记7-webpack详解(2)
notChange的博客
02-15 824
本文主要包含：webpack配置vue，webpack的plugin，搭建本地服务器以及配置文件分离
vue-cli3+工具中，配置路径别名(vue.config.js)
丹
11-20 1442
vue-cli 2.x 版本创建项目时，我们可以在 build 文件夹下找到 webpack.base.conf.js 文件，在里面修改 resolve.alias 即可。 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@...
vue3/vue2 项目配置 别名 @
weixin_44832362的博客
12-23 3906
vue3/vue2 项目配置 别名 @
在vue2中 如何引用别名 详细步骤
zzz1780340的博客
04-28 774
上面的写法是咱们正常按照相对路径或者绝对路径引入图片的方法，这样的方式呢在代码中看起来特别的繁琐或者很low，在一个项目中，为了使咱们的项目代码看起来整齐简单，使用别名是必不可少的的一个环节。都是可以正常的显示的。ok现在应该大概了解什么是别名了吧。所以引入别名的这种方法，也就是下面的这种写法。
使用vue-cli2脚手架创建的项目， 如何给常用文件路径起别名
明天的明天5812
06-28 954
给常用路径起别名可以方便开发者快速开发 一、起别名的文件在哪里？ 在 build 文件夹下的 webpack.base.conf.js 里面 resolve 对象时用来解决路径相关问题的 起别名是在图中的 alias 对象下对想要起别名的路径进行设置。常见的是 @ 这个别名，下面的是自己项目里需要起的别名。 以下是使用别名需要注意的地方： 1、常见的是用 import 导入的时候需要使用 别名路径 这种就 使用这种 直接写别名就可以了。 2、如果不是用 import 导入，而...
Vue2x vuecli3 配置路径别名
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-05 1578
路径别名是指在项目中定义一些简短的别名，用于替代冗长的相对路径。这不仅可以提高代码的可读性和可维护性，还能避免路径错误的问题。
vue中配置路径别名
大把小米的博客
06-28 412
在vue.config.js中配置 1.先在顶部引入path模块 const path = require('path'); 2.在module.exports 里面 module.exports = { // 配置路径别名 chainWebpack: (config) => { config.resolve.alias.set('@', resolve('src')).set('@assets', resolve('src/assets')) } } 3.
【Vue】src 路径别名`@`的配置
小秀的博客
09-03 584
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给 src 文件夹配置一个别名。
vue 配置路径别名
qq_42493241的博客
09-01 250
前言：在vue项目开发中有没有这种烦恼？一大堆”../“返回上一目录 那我们改如何省略掉”../“直接指定文件夹呢？可通过起别名来去除掉烦人的”../“ import NavBar from '../../../components/NavBar/NavBar.vue' 在项目的脚手架中创建vue.config.js 当然如果项目中存在此文件直接在里面写即可 module.exports = { configureWebpack : { resolve : { al.
vue项目配置路径别名
weixin_43697548的博客
04-21 1321
基于vue/cli3.0+脚手架搭建Vue项目(03) 文章目录基于vue/cli3.0+脚手架搭建Vue项目(03)前言一、配置vue.config.js二、验证别名总结 前言 更方便的设置路径的引用 一、配置vue.config.js const { defineConfig } = require('@vue/cli-service') const path = require('path'); function resolve(dir) { return path.join(__dirna
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值