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

更新时间：2022年06月05日 09:54:59 作者：a57521

这篇文章主要介绍了vue @ ~ 相对路径路径别名设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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

./这是相对路径的意思，同级目录。
../上级目录。
@/这是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")

  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue自适应布局postcss-px2rem详解
这篇文章主要介绍了vue自适应布局（postcss-px2rem）的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-05-05
Vue源码makeMap函数深入分析
vue源码中的makeMap用在很多地方，主要是判断标签是原生标签还是用户自定义的组件，但是标签很多，如果每判断一次都执行一次循环，累计下来，性能损耗还是很大的，makeMap就是解决这个问题出现的
2022-08-08
vue router 配置路由的方法
这篇文章主要介绍了vue router 配置路由的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
详解vue 组件
这篇文章主要介绍了详解vue 组件的相关知识，文中讲解非常细致，代码供大家参考学习，感兴趣的朋友可以了解下
2020-06-06
Vue+OpenLayer实现测距功能
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。本文将通过Vue和OpenLayer实现测距功能，需要的可以参考一下
2022-04-04
Vue源码解析之数据响应系统的使用
这篇文章主要介绍了Vue源码解析之数据响应系统的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
el-tooltip根据条件控制显示的示例代码
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
vue ssr 实现方式(学习笔记)
这篇文章主要介绍了vue ssr 实现方式(学习笔记)，本文不涉及到源码解析，主要讲解如何实现 vue 的服务端渲染，比较适合 vue-ssr 小白阅读，感兴趣的小伙伴们可以参考一下
2019-01-01
Vue响应式原理的示例详解
Vue 最独特的特性之一，是非侵入式的响应系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。本文将通过示例详解Vue的响应式原理，感兴趣的可以了解一下
2022-03-03
在Vue3项目中安装和配置Three.js的操作代码
Three.js是一个轻量级的WebGL封装库,用于在浏览器中渲染复杂的3D图形,它提供了便捷的API,可以快速构建3D场景、对象和动画,Vue.js是一个渐进式JavaScript框架,擅长构建用户界面,本文给大家介绍了在Vue3项目中安装和配置Three.js的操作,需要的朋友可以参考下
2024-12-12