广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue@~相对路径路径别名设置方式
  • 289
分享到

vue@~相对路径路径别名设置方式

2024-04-02 19:04:59 289人浏览 薄情痞子
摘要

目录@ ~ 相对路径 路径别名设置项目设置src相对路径为@第一步 创建Vue.config.js文件第二步 添加代码@ ~ 相对路径 路径别名设置 ./这是相对路径的意思,同级目录

@ ~ 相对路径 路径别名设置

  • ./这是相对路径的意思,同级目录。
  • ../上级目录。
  • @/这是webpack设置的路径别名。在build/WEBpack.base.conf这个文件里面设置了@具体指的是什么

在build/webpack.base.conf里找到如下

resolve: {
    extensions: ['.js', '.vue', '.JSON'],//取消后缀  引入文件路径就不用加文件后缀了
    alias: {
      'vue$': 'vue/dist/vue.esm.js', //引入vue
      '@': resolve('src'),
      'asd': resolve('src/components/children'), //自己新建 要从src开始写文件路径
    }
  },

使用 import heads from '@/components/children/heads'就不用频繁的使用./和../了,而是利用@直接定位到了src目录。

或者 import heads from 'asd/heads'

另外:在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用上面这些相对路径了的配置了,而必须使用一般的路径方式方式。

项目设置src相对路径为@

第一步 创建vue.config.js文件

第二步 添加代码

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  devServer: {},
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src')),
      .set('@u', resolve('src/utils')),
      "@c": resolve("src/components"),
        "@v": resolve("src/pages"),
        "@s": resolve("src/static"),
        "@u": resolve("src/utils")

  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue@~相对路径路径别名设置方式

本文链接: https://www.lsjlt.com/news/150534.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue@~相对路径路径别名设置方式
    目录@ ~ 相对路径 路径别名设置项目设置src相对路径为@第一步 创建vue.config.js文件第二步 添加代码@ ~ 相对路径 路径别名设置 ./这是相对路径的意思,同级目录...
    99+
    2022-11-13
  • vue相对路径与路径别名如何设置
    这篇文章主要介绍“vue相对路径与路径别名如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue相对路径与路径别名如何设置”文章能帮助大家解决问题。@ ~ 相对路径 路径别名设置./这是相对路...
    99+
    2023-06-30
  • vue路由相对路径跳转方式
    目录vue路由相对路径跳转1.append 属性2.router.resolve方法vue router动态路由点击跳转路径地址重复追加在练习写vue router动态路由时碰到的问...
    99+
    2022-11-12
  • linux绝对路径和相对路径有什么区别
    Linux的路径分为绝对路径和相对路径。绝对路径是从根目录(/)开始的完整路径,它指定了一个文件或目录在文件系统中的确切位置。例如,...
    99+
    2023-10-11
    linux
  • vue为自定义路径设置别名的方法
    Vue中如何配置自定义路径别名 在我们日常开发中,常常会导入一些模块或者组件,如果采用相对路径的方式: import uEditor from "../../../../../c...
    99+
    2022-11-12
  • HTML中相对路径和绝对路径有什么区别
    这篇文章主要讲解了“HTML中相对路径和绝对路径有什么区别”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML中相对路径和绝对路径有什么区别”吧!   ...
    99+
    2022-10-19
  • linux绝对路径和相对路径的区别有哪些
    小编给大家分享一下linux绝对路径和相对路径的区别有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在linux中绝对路径与相对路径的区别是:绝对路径是从li...
    99+
    2023-06-29
  • python读取相对路径和绝对路径的方法
    目录一、简介二、绝对路径 三、相对路径一、简介 下面的路径介绍针对windows,在编写的py文件中打开文件的时候经常见到下面其中路径的表达方式。 我们常用’/...
    99+
    2023-02-10
    python读取相对路径和绝对路径 python读取相对路径 python读取绝对路径
  • vue如何设置文件引用路径别名
    这篇文章主要为大家展示了“vue如何设置文件引用路径别名”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何设置文件引用路径别名”这篇文章吧。设置文件引用路...
    99+
    2022-10-19
  • 关于Jsoup将相对路径转为绝对路径的方法
    目录通过Jsoup将相对路径转为绝对路径的方法示例自从使用 HttpClient 和 Jsoup 配合编写了几个简单的入门爬虫之后,发现对于绝对路径的需求是很频繁的,因为大部分的网页...
    99+
    2023-05-17
    Jsoup 相对路径 Jsoup 绝对路径
  • web网页制作绝对路径与相对路径的区别有哪些
    小编给大家分享一下web网页制作绝对路径与相对路径的区别有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.绝对路径先说在本地计算机上,文件的绝对路径当然是指...
    99+
    2023-06-08
  • 使用SpringBoot设置虚拟路径映射绝对路径
    目录SpringBoot 设置虚拟路径映射绝对路径下面我们就来代码实现下springboot打war包图片的虚拟路径映射在html图片的路径如图然后要映射到阿里云Linux服务器上路...
    99+
    2022-11-12
  • Angular10如何配置@路径别名
    这篇文章将为大家详细讲解有关Angular10如何配置@路径别名,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Angular10中配置@路径别名Angular10中的项目文件结构 中文网站Angular1...
    99+
    2023-06-14
  • Vite如何配置路径别名
    这篇文章主要介绍“Vite如何配置路径别名”,在日常操作中,相信很多人在Vite如何配置路径别名问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vite如何配置路径别名”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-05
  • vue项目中使用axios遇到的相对路径和绝对路径问题
    目录使用axios遇到的相对路径和绝对路径问题1.设置全局baseURL2.覆盖baseURLaxios设置访问基础路径在main.js 做如下配置可能会遇到下面的报错使用axios...
    99+
    2022-11-13
  • react如何快速设置文件路径别名
    React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写...
    99+
    2022-11-12
  • react怎么快速设置文件路径别名
    这篇文章给大家分享的是有关react怎么快速设置文件路径别名的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为...
    99+
    2023-06-14
  • vue中给路径起别名的实现方法
    目录1、在webpack.base.conf.js配置文件中给路径起别名2、在vue文件中使用别名2.1、在import中使用@2.2、在dom中使用别名(~)3、修改了vue的配置...
    99+
    2022-11-13
  • react脚手架配置路径别名的方法
    文章写时react版本16.13.1 1输入命令 npm run eject 在项目根目录下生成config目录 2在confilg下打开webpack.config.js文件找...
    99+
    2022-11-12
  • vue实现在data里引入相对路径
    目录在data里引入相对路径问题解决如何在data中正常引入图片路径此时有两种解决方法在data里引入相对路径 问题 在项目的HTML中引入图片的相对路径,这样写是能找到图片显示出来...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作