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

目录
  • @ ~ 相对路径 路径别名设置
  • 项目设置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")

  }
}

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

赞 (0)

相关推荐

  • vue中给路径起别名的实现方法

    vue中给路径起别名的实现方法

    目录 1.在webpack.base.conf.js配置文件中给路径起别名 2.在vue文件中使用别名 2.1.在import中使用@ 2.2.在dom中使用别名(~) 3.修改了vue的配置文件,要重新npmrundev 1.在webpack.base.conf.js配置文件中给路径起别名 resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'assets': resolve('src/a

  • Vue CL3 配置路径别名详解

    Cli3工具中,配置路径别名 最近用Vue Cli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,发现都在vue.config.js里来配置了 配置路径别名,方便引用,不用写那么长 配置前: import TodoList from '../../components/TodoList' 配置后(不用再关心文件层级关系): import TodoList from 'components/TodoList' 在根目录下添加'vue

  • vue为自定义路径设置别名的方法

    vue为自定义路径设置别名的方法

    Vue中如何配置自定义路径别名 在我们日常开发中,常常会导入一些模块或者组件,如果采用相对路径的方式: import uEditor from "../../../../../components/tools"; 会显得臃肿,多余,如果引用稍有差错就会出现-404的报错,不优雅,还会经常出现404错误,如果文件有变,还需要一个一个文件找到改路径进行重新修改,十分麻烦,vue cli3以上的版本在node_modules中提供了文件别名功能.但是还是建议没有特别要求少改一点node_mo

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

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

    目录 @ ~ 相对路径 路径别名设置 项目设置src相对路径为@ 第一步 创建vue.config.js文件 第二步 添加代码 @ ~ 相对路径 路径别名设置 ./这是相对路径的意思,同级目录. ../上级目录. @/这是webpack设置的路径别名.在build/webpack.base.conf这个文件里面设置了@具体指的是什么 在build/webpack.base.conf里找到如下 resolve: {     extensions: ['.js', '.vue', '.json'],

  • vue iview 导航高亮动态设置方式

    vue iview 导航高亮动态设置方式

    目录 vue iview导航高亮动态设置 vue element导航栏高亮显示问题 问题1 问题2 vue iview导航高亮动态设置 在开发的是时候,路由发生了跳转但是发现导航的没有进行高亮设置,在iview的menu组件中控制高亮的是active-name,现在动态设置active-name 完成高亮 <Menu :active-name="activeName" theme="light" width="auto" :open-nam

  • vue路由相对路径跳转方式

    vue路由相对路径跳转方式

    目录 vue路由相对路径跳转 1.append 属性 2.router.resolve方法 vue router动态路由点击跳转路径地址重复追加 在练习写vue router动态路由时碰到的问题 vue路由相对路径跳转 今天写东西遇到多层路由,路由之间跳转时需要相对路径,因此查了一下官网用到了append属性和router.resolve方法,因此列出具体的使用方法. 1.append 属性 设置 append 属性后,则在当前 (相对) 路径前添加基路径. 类型:boolean 默认值:fal

  • 部属vue项目,访问路径设置非根,显示白屏的解决方案

    部属vue项目,访问路径设置非根,显示白屏的解决方案

    目录 vue访问路径设置非根显示白屏 解决 vue部署到非根目录设置 需要修改三处配置 vue访问路径设置非根显示白屏 问题: 访问页面,返回“We’re sorry but XXX doesn’t work properly without JavaScript enabled. Please enable it to continue.” 环境: 使用nginx部属vue项目时,没有把访问项目设置为根路径 说明: 当访问项目对应的nginx配置没有给项目的访问路径设置为根时,页面显示白屏,在

  • C#获取路径的几种方式实例分析

    本文实例讲述了C#获取路径的几种方式.分享给大家供大家参考.具体如下: string str1 =Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string str2=Environment.CurrentDirectory;//获取和设置当前目录(即该进程从中启动的目录)的完全限定路径. //备注按照定义,如果该进程在本地或网络驱动器的根目录中启动,则此属性的值为驱动器名称后跟一个尾部反斜杠(如"C:\&q

  • Java实现读取resources目录下的文件路径的九种方式

    目录 前情提要 方式一 方式二 方式三 方式四(重要) 方式五(重要) 方式六(重要) 方式七 方式八 方式九 前情提要 本文中提供了九种方式获取resources目录下文件的方式.其中打印文件的方法如下:     /**      * 根据文件路径读取文件内容      *      * @param fileInPath      * @throws IOException      */     public static void getFileContent(Object fileIn

  • Java web开发中加载图片路径的两种方式

    (1)   src="/image/1_it.jpg" (2)   src="http://localhost:8080/image/1_it.jpg" 其中localhost可以换位你的电脑IP,端口号也要相应改变. 以上均在基于编译器idea以及tomcat服务器开发的web中测试可行!都是要先定位到项目的位置! 以上所述是小编给大家介绍的Java web开发加载图片路径的两种方式,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

  • Android中访问sdcard路径的几种方式

    Android中访问sdcard路径的几种方式

    以前的Android(4.1之前的版本)中,SDcard路径通过"/sdcard"或者"/mnt/sdcard"来表示,而在JellyBean(安卓4.1)系统中修改为了" /storage/sdcard0",还会有多个SDcard的情况.目前为了保持和之前代码的兼容,SDcard路径做了Link映射.为了使代码更加健壮并能兼容以后的Android版本和新设备,安卓4,1后sdcard中会有系统自动生成的保存特定内容的的文件目录,从而可以使用一些

随机推荐