前沿

---

在日常的项目开发中，经常会引用css,less,js,img等的文件的路径问题，之前也有些模糊，现在记录下来，方便自己清晰的理解一遍，也方便以后使用。

首先说说最常见的./ ../两种

./:是指当前目录下
../:是指父级目录下

接下来再说说@

@就是你在build文件夹下webpack.base.conf.js文件中的resolve目录下配置的

  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),  //比如说这里的@就指向src
    }
  },

你还可以配置其他的路径，比如说你的项目层级较深，引入图片路径很繁琐。例如

<img class="Width100 Height100" src="../../../../components/baseImg/1901.png">
这样是不是很繁琐，这是后你在webpack.base.conf.js里边配置好就简单了

  resolve: {
    extensions: ['.js', '.vue', '.json','.less'],  //省略扩展名，也就是说引入文件时可以省略后缀
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),  //比如说这里的@就指向src
      'useImage':resolve('src/components')
这样配置好了引入的时候就这么写就好了
<img class="Width100 Height100" src="～useImage/baseImg/1901.png">
    }
  },

注意，配置好了，要重启项目哦，我再这里也花了好久的时间，感觉一直不生效，最后重启了项目，才好了

这时候就会有人问~是做什么的?那么就详细解释一下。

其实他就是相对路径，举个例子，一看便知,我也是遇到坑了爬了好久才出来，

之前我再项目中应用一个公共的less,怎么写都不生效，也不知道为啥，后来不断搜索询问，也是加了一个~才好了

@import url('~@/components/tigerBaseCss/index');

经过这次爬坑，好好了解了一下~的作用，才明白，原来是这样

~ 表示该符合后面值是从你的webpack.base.conf.js文件中的resolve目录下配置的路径去找的。

@import url('~@/components/tigerBaseCss/index');
就相当于是
@import url('src/components/tigerBaseCss/index');

或者说你配置的

<img class="Width100 Height100" src="～useImage/baseImg/1901.png">
就等同于
<img class="Width100 Height100" src="src/components/useImage/baseImg/1901.png">

结束语

看到这里大概已经了解了把，还有什么不足的，大家多提出，及时改正。