Vue开发笔记-- 配置resolve映射路径

最新推荐文章于 2022-11-03 11:01:39 发布
最新推荐文章于 2022-11-03 11:01:39 发布
阅读量3k 收藏 2
点赞数 1
分类专栏： Vue开发笔记 文章标签： resolve映射路径 Vue开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013025674/article/details/87775913
版权

  在Vue-Cli项目开发中，我们常会引用到文件资源，如果文件路径很长，使用起来很不方便，且代码看着不美观。例如：

引用图片时，每次都要在图片路径前面加" ../../../assets/images ”字符串,如果我们不想使用这些字符串就需要配置webpack的resolve了。

  打开webpack配置文件：在bulid文件夹下

     

    找到resolve属性。

    

    设置alias属性值。例如添加一行： " '@img': resolve('src/assets/images')”  如图

   

    配置好保存之后，重启项目(npm run dev)。我们就可以在项目中用@img代替 "../../../assets/images ” 了。例如

    

  

不知名码农1994
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue路径优化之resolve的使用
fei2636的博客
11-22 3万+
　通过vue-cli来创建vue+webpack的项目时，已经有很多都配置好了，但是路径方面为了方便开发，还可以优化。 1. resolve.extensions  　　在webpack.base.conf.js中，我们可以看到resolve配置，其中的extengsions是一个数组，如下所示： extensions: ['.js', '.vue', '.json'], 　　通...
浅谈vue路径优化之resolve
08-29
本篇文章主要介绍了浅谈vue路径优化之resolve，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3 vue.config.js设置px2rem、设置路径映射、设置Proxy解决跨域
qq_43610311的博客
12-27 434
Vue3 vue.config.js设置px2rem、设置路径映射、设置Proxy解决跨域
Vue路由详解与映射关系 Vue-Router
weixin_45796807的博客
12-28 1239
Vue-Router 前端路由 认识路由 vue-router 基本使用 vue-router 嵌套路由 vue-router 参数传递 vue-router 导航守卫 keep-alive //分割线============================== 路由（ routing ）就是通过互联网络把信息从源地址传输到目的地址的活动------ 来源维基百科 生活中的路由器呢？ 路由器提供了两种机制：路由和转送 1、路由是决定数据包从来源到目的的路径 2、转送将输入端的数据转移到 合适的输出端 **
Vue结合SpringBoot文件上传并返回路径映射
weixin_42433157的博客
11-19 1198
创建一个Vue项目 这里我们使用最简单的form表单进行上传 这里需要注意的有三点 1 action的路径要和后端接口的路径对应 2 上传的数据类型要设置为 multipart/form-data 3 请求的方法类型要为POST 创建一个SpringBoot项目 目录结构和maven依赖如下 这里的自定义配置是服务器存放文件的路径 这里的为读取上图所配置的路径路径信息 这里为接收文件并存储到服务器上并返回网络路径 这里为定义的资源映射路径前缀 这里为定义的资源文件路径映射.
Vue2.0开发之——webpack基础-resolve指定默认路径(12)
最新发布
我的博客
11-03 514
resolve的作用与配置使用resolve前后，文件路径的配置more。
vue-cli脚手架-bulid下的配置文件
08-27
Vue-cli脚手架bulid下的配置文件是Vue.js开发过程中的一部分，主要用于创建和配置Vue.js项目。通过学习和掌握这些配置文件，可以帮助开发者更好地理解Vue.js项目的结构和工作原理，并且提高项目的开发效率和质量。 ...
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <v></v> // 2. 局部引入 //a
vue-video-player视频播放器使用配置详解
01-18
本文实例为大家分享了vue-video-player视频播放器的使用配置，供大家参考，具体内容如下 1、安装 npm install vue-video-player -save 2、在main.js中添加 import VueVideoPlayer from 'vue-video-player' // 视频...
详解vue-cli下ESlint 配置说明
10-18
主要介绍了详解vue-cli下ESlint 配置说明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue的 v-for 循环中图片加载路径问题
10-18
可以使用Vue的懒加载库如`vue-lazyload`。 3. **图片不存在**：确保后台返回的图片名称与实际存在的图片文件名一致。 4. **网络跨域**：如果图片资源不在同一个域下，可能存在跨域问题。可以使用`CORS`（跨源资源...
【Vue】加载异步组件时的resolve函数
热门推荐
锋利的绵羊的博客
07-21 1万+
1. `resolve => require(['/foo'], resolve)` 中的 `resolve` 是什么? 2. `require` 的二参是什么?
Vue路由懒加载（resolve）,嵌套路由 3
林中明月间丶
03-02 8617
懒加载：又叫延时加载，即在需要的时候进行加载，随用即载 使用懒加载的原因： 像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载...
vue中路由的resolve新窗口打开
qq_45228255的博客
05-05 917
路由跳转的几种方式 1、router-link（不带参） <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> 2、router-link（带参） params <router-link :to="{name:'user', params: {name: '张三'}}"> // 路由配置 path: "/home/:name" // 获取参数 this.$route.p
vue3：vuecli5 中配置 resolve.fallback
weixin_48279894的博客
08-08 3539
vue3）使用 webpack 的 path 模块时出现 “webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it." 的文体
vue-cli安装与问题code ERESOLVE npm ERR ERESOLVE unable to resolve dependency tree处理
qdlxlxyzlxy的专栏
02-16 2768
Vue学习 一、安装vue-cli 下载地址： 下载 | Node.js 中文网 安装的时候一直下一步直到结束 确认是否安装成功： 在cmd中运行node -v命令，查看是否能够输出版本号 在cmd中运行npm -v命令，查看是否能够输出版本号 node -v npm -v 安装Node.js淘宝镜像加速器（cnpm） npm install cnpm -g //-g 全局安装 安装vue-cli -g cnpm install vue-cli -g vue l
vue路由懒加载resolve方式与import方式
yuxinSir的博客
03-15 1834
使用路由懒加载是为了 更好的用户体验，首屏组件加载的速度快一点，解决了白屏的问题 懒加载就是延迟加载或者屎按需加载，在需要的时候进行加载 常用的懒加载有两种，vue异步组件和es的import 1.未使用懒加载的时候vue中的路由代码： //每一个组件都会被加载进来 ，打开首页的时候全部都会加载 import Vue from "vue" import Router from "vue-router" import HelloWorld from "@/components/HelloWorld.vue"
vue基本语法
weixin_56263402的博客
06-19 411
VUE day01 异步函数和回调函数 何为异步函数：不会马上执行，需要特定的时机执行的函数，由于是异步的，不会阻塞主线程代码的执行 异步函数有哪些：ajax请求，定时器，延时器，文件读取 何为回调函数：把一个函数当作参数传递，将来特定的时机调用，这个函数就是回调函数，一般异步操作，都会用到回调函数 例如：setTimeout(()=>{ console.log(2)},1000)==>定时器里面的打印2不会立刻执行，会等1秒后打印2 回调函数的缺点：1.回调函数不会立刻被执行，阅读
前端Bootstrap+Es6+vue学习笔记
06-10
综上所述，前端Bootstrap Es6 vue学习笔记囊括了前端开发的关键技术，包括基础环境配置、样式排版、响应式布局、组件、内置插件、HTML5 CSS3支持、LESS动态样式和Vue.js等。通过学习这些技术，我们可以更好地进行...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值