vue中引用路径的简化

最新推荐文章于 2024-01-30 15:11:49 发布
最新推荐文章于 2024-01-30 15:11:49 发布
阅读量850 收藏 2
点赞数 1
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43508736/article/details/107752705
版权

如题 有时候我们在vue中引用不同层级文件夹下的组件时 需要带上 …/…/ 甚至更多…/ 十分的不方便。而且容易造成失误从而引用失败。那么我们可以用简化的路径引用方法 这样不仅节省时间 还减少了出错的机会。

1.在你的vue项目文件夹下创建vue.config.js

在这里插入图片描述

2.在vue.config.js里配置简写路径

这样src文件夹下的子文件就可以直接引用而不需要传统的人工的计算…/了
在这里插入图片描述

Yangy612
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于vue单文件中引用路径的处理方法
10-18
主要给大家介绍了关于vue单文件中引用路径处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
vuex引入多个模块简写方法
weixin_33724659的博客
09-10 1622
在使用Vuex对vue项目进行状态管理时，我们的Vuex主文件通常是这个样子的： import Vue from 'vue' import Vuex from 'vuex' import A from './modules/a' import B from './modules/b' Vue.use(Vuex) export default new Vuex.Store({ modules...
vue中引入路径@的用法及说明
最新发布
weixin_42508745的博客
01-30 558
引用 https://blog.csdn.net/weixin_44836531/article/details/131061927。
vue中引入路径用法及说明
zzy7075的专栏
03-07 2392
vue中引入路径@的用法及说明
vue文件引入路径 ./ ../ @/ @xxx
xll0513的博客
04-13 1568
的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。(注意@不要用在引入css文件路径，有的项目规范不支持)// 在导入语句没带文件后缀时，webpack会自动按照顺序添加后缀名查找。vue在webpack.base.conf.js文件中有如下配置。// 将项目根目录中，src的路径配置为别名@例如：在路由index.js中，导入banana.vue。./当前文件同级目录， ./css/等同于css/../当前文件上一级目录。// 连接路径并返回。
vue中引入路径说明
heni6560的博客
01-19 1388
/当前文件同级目录…/当前文件上一级目录@ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。
Vue.js中的图片引用路径的方式
10-19
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧
Vue 去除路径中的＃号
08-27
大家都知道vue-router有两种模式，hash模式和history模式，带＃的则是hash模式。接下来给大家带来了Vue 去除路径中的＃号的解决方法，感兴趣的朋友一起看看吧
vue中本地静态图片路径写法
10-18
给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式，需要的朋友参考下吧
解决Vue打包之后文件路径出错的问题
08-27
下面小编就为大家分享一篇解决Vue打包之后文件路径出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
五-2、vue中引用文件路径问题
qq_23135259的博客
02-09 6929
vue中引用文件路径问题，vue中给div设置style
VUE如何引用组件
qq_31544819的博客
07-19 1万+
vue引用组件主要分为如下两种: 一:全局引用 1,现在main中引用组件: import 组件别名 from '组件路径' 2.注册组件 Vue.component('组件别名', 组件别名) 二:局部引用 1.在需要引用组件的页面中script下写如下代码 import 组件别名 from "组件路径"; 2.注册组件components:{组件别名} ...
vue项目引入路径前面的@符号是什么？（简化路径）
yinzisang的博客
11-08 1163
webpack 配置 在 js 中 import 相对路径代码的时候经常出现路径层级较深的情况，引入起来比较麻烦（虽然 webstorm 支持提示简化了不少），所以在 webpack 中可以做如下配置： configureWebpack: { // provide the app's title in webpack's name field, so that // it can be accessed in index.html to inject the correct title
vue中引入路径@的用法
zszcc的博客
09-14 6193
一、Vue文件中引用路径的介绍 1、路径 ./ ./当前文件同级目录 2、路径 …/ …/当前文件上一级目录 3、@符号 @ 的作用是在你引入模块时，可以使用 @ 代替 /src 目录，避免易错的相对路径。 二、Vue中使用 1. vue.config.js配置文件中使用 chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('s
Vue中引用路径的配置
nunumaymax的博客
02-22 3064
VUE中引用路径的配置引用components目录下的子组件举例解决方法引用assets目录下的文件举例解决方法 在vue项目开发中经常引用JS、CSS、IMG文件，当项目较大时文件层级很多，导致路径很长，我们可以通过在bulid > webpack.base.conf.js 设置简便的引用路径。 引用components目录下的子组件 举例 在父组件中引入子组件： import HelloWorldSon from '../components/HelloWorldSon' import Hello
vue使用@路径引入
热门推荐
马优晨
06-04 2万+
vue使用@路径引入，这个在项目中很常见； 项目中使用引入文件有时候路径比较深，需要使用"../../../xx.js"这种类似的路劲引入，这种方式比较笨，可以使用webpack的别名alias配置来解决。 首先，先确定项目中是否有path模块： 如果没有path模块需要先安装path npm install path --save （1）vue-cli1，vue-cli2搭建的项目 以下为vue.config.js配置 const path = require("path"); function
简化文件、图片路径的方法，也就是vue中关于 '@/' 、 '~@/' 代表的含义
weixin_44514665的博客
06-05 6703
使用背景 在vue的项目中需要使用到 某一个路径的图片，但是用相对路径和绝对路径书写起来都会是很长的路径 例如： ./../../../static/img/my/icon4.png 甚至更长 这种情况下，想要我们的路径书写简短一点 就可以使用 ‘@/’ 、 ‘~@/’ 来表示前面部分的路径 ‘@/’ 也是相对路径 和 ‘./’ 意思差不多，具体表示什么路径需要看具体的@ 如何配置 首先需要现...
Vue CLI 3 实现alias简化路径
野生松
08-12 458
我们可以使用alias将复杂的文件路径定义成一个变量来访问； 在不使用 alias 的项目中，我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径，比如像这样： import xx from '../../../../xx.vue' 这样就会出现一个问题：一旦相对层次结构较深，我们就很难去定位所引入文件的具体位置。 在 CLI 3.x 中我们无法直接操作 webpack 的配置文件，我们需要通过 chainWebpack 来进行间接修改，代码如下： /* vue.config.j
vue项目笔记（8）-路径别名的使用
从零出发
08-10 2079
vue中路径别名的使用 在vue项目中，我们通常需要引入很多文件，但是在编写文件路径的时候很是麻烦，很多地方都是重复的路径前缀且容易出错。这个时候我们可以通过定义别名在简化路径，具体的方法如下： 1、打开项目的build/webpack.base.conf.js文件，找到resolve→alias，如下： resolve: { extensions: ['.js', '.v...
使用 xBuilder 创建 Vue 项目中如何引用JS文件
08-05
如果需要引用的文件不在static文件夹下，那么需要根据相对路径来确定引用路径。 最后，保存.vue文件并重新运行项目，JavaScript 文件就会被成功引入到 Vue 项目中了。 总结一下，使用 xBuilder 创建 Vue 项目中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值