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

最新推荐文章于 2025-06-18 10:56:12 发布
原创 最新推荐文章于 2025-06-18 10:56:12 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #webpack

本文介绍了在Vue2.x项目中，如何在webpack配置文件中设置别名，以简化静态资源的导入路径。通过修改`webpack.base.conf.js`，可以将相对路径如`../../../static/images/scan.png`替换为`static/images/scan.png`，提高代码可读性和维护性。别名更改后，记得重启项目生效。

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 1180
在vue-cli项目中的的配置文件vue.config.js中添加路径引用别名 1、引入路径 const path = require('path') 2、添加函数 function resolve(dir) { return path.join(__dirname, dir) } 3、添加别名 resolve: { alias: { ...
vue2.x 从vue.config.js配置到项目优化
qq_38734862的博客
04-23 5085
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
第二步 Vue2 vue.config.js 基础配置，路径别名alias
mebell的专栏
09-18 3695
vue.config.js是一个用于 Vue 项目的配置文件，用于自定义项目的构建配置。在这个文件中，你可以修改 webpack 相关的选项，以满足你的项目需求。
vue脚手架配置路径别名
weixin_45805570的博客
03-25 974
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 1497
在Vue项目中，Vue CLI2和Vue CLI3文件别名的配置 我们在写Vue项目时，常常会在某个地方引用许多文件，会创建许多文件夹，在引用路径的时候在前面加" . "是非常苦恼的事情，而且代码的阅读性也很差，像下面这样： `import MovieItem from "../../../components/movieitem/MovieItem" 在vue中可以通过配置别名的方式来简化。 ...
Vue2x vuecli3 配置路径别名
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-05 1674
路径别名是指在项目中定义一些简短的别名，用于替代冗长的相对路径。这不仅可以提高代码的可读性和可维护性，还能避免路径错误的问题。
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` ...
vue 2.x + @vue/cli 4.x开发阶段使用Vite
m0_44963501的博客
08-14 628
vue/cli 升级 vite 动态菜单vite处理
vue2.x笔记7-webpack详解(2)
notChange的博客
02-15 905
本文主要包含：webpack配置vue，webpack的plugin，搭建本地服务器以及配置文件分离
代码分析 —— 在vue2.x里设置alias别名
weixin_34409741的博客
04-28 809
1.有关在vue项目中设置别名 在用vue-cli搭建的vue项目中经常会引用各个地方的文件，而在webpack.base.conf.js这个文件里可以为一些常用的目录设置一个简短且易懂的别名。 2.如何设置别名 在webpack.base.conf.js文件中可以找到这样一段代码： resolve: { extensions: ...
vue3/vue2 项目配置 别名 @
weixin_44832362的博客
12-23 3956
vue3/vue2 项目配置 别名 @
在vue2中 如何引用别名 详细步骤
zzz1780340的博客
04-28 905
上面的写法是咱们正常按照相对路径或者绝对路径引入图片的方法，这样的方式呢在代码中看起来特别的繁琐或者很low，在一个项目中，为了使咱们的项目代码看起来整齐简单，使用别名是必不可少的的一个环节。都是可以正常的显示的。ok现在应该大概了解什么是别名了吧。所以引入别名的这种方法，也就是下面的这种写法。
使用vue-cli2脚手架创建的项目， 如何给常用文件路径起别名
明天的明天5812
06-28 999
给常用路径起别名可以方便开发者快速开发 一、起别名的文件在哪里？ 在 build 文件夹下的 webpack.base.conf.js 里面 resolve 对象时用来解决路径相关问题的 起别名是在图中的 alias 对象下对想要起别名的路径进行设置。常见的是 @ 这个别名，下面的是自己项目里需要起的别名。 以下是使用别名需要注意的地方： 1、常见的是用 import 导入的时候需要使用 别名路径 这种就 使用这种 直接写别名就可以了。 2、如果不是用 import 导入，而...
vue中配置路径别名
大把小米的博客
06-28 443
在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 679
在开发项目的时候文件与文件关系可能很复杂，因此我们需要给 src 文件夹配置一个别名。
如何在 Vue 项目中配置路径别名
最新发布
m0_62435896的博客
06-18 249
如果你是使用Vite作为构建工具，你可以在项目的文件中设置路径别名。这样，当你导入模块时，可以使用简短的别名，而不需要写复杂的相对路径。project/│├── src/│你可以在resolve: {alias: {'@': path.resolve(__dirname, 'src') // 将 '@' 映射为 'src' 目录})这里我们将设置为指向src目录。这样，你就可以通过@/来代替src/，使得路径看起来更简洁。例如，假设你有一个组件在。
关于vue起别名配置
weixin_46599638的博客
08-07 2122
1 .目录创建文件 vue.config.js 2. vue.config.js 内容 ： @：表示src目录 复制粘贴就可以用了 module.exports={ configureWebpack:{ resolve:{ alias:{ 'assets':'@/assets', 'common':'@/common', ...
vue 配置路径别名
qq_42493241的博客
09-01 266
前言：在vue项目开发中有没有这种烦恼？一大堆”../“返回上一目录 那我们改如何省略掉”../“直接指定文件夹呢？可通过起别名来去除掉烦人的”../“ import NavBar from '../../../components/NavBar/NavBar.vue' 在项目的脚手架中创建vue.config.js 当然如果项目中存在此文件直接在里面写即可 module.exports = { configureWebpack : { resolve : { al.
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值