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祖孙组件之间的数据传递案例
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
Jquery性能优化详解
2014/05/15 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python抽象类的新写法
2015/06/18 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Python-split()函数实例用法讲解
2020/12/18 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
出纳员岗位职责风险
2014/03/06 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
门卫管理制度范本
2015/08/05 职场文书
《司马光》教学反思
2016/02/22 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL