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


Posted in Vue.js onJune 05, 2022

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

  • ./这是相对路径的意思,同级目录。
  • ../上级目录。
  • @/这是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文件

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

第二步 添加代码

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")

  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 


Tags in this post...

Vue.js 相关文章推荐
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 #Vue.js
vue中data里面的数据相互使用方式
Jun 05 #Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
You might like
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
PHP7新特性简述
2017/06/11 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
Django中使用group_by的方法
2015/05/26 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
质检员岗位职责
2013/12/17 职场文书
端午节活动策划方案
2014/03/09 职场文书
党组织结对共建协议书
2016/03/23 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL