URL路径写法

常见的URL有多种形式，

这种

src="http://api.map.baidu.com/api?v=3.0&ak=ttihABQXoDe0DxuoBNdCt5e037OdPUtF"

这种

static/Echarts/echarts.js

这种

../../assets/images/cata.png

还有这种

@/ajax/index

。。。。

这里主要归纳一下各种url写法的区别与意义，方便日后按需选择。

1.最常见的是绝对路径，

src="http://api.map.baidu.com/api?v=3.0&ak=ttihABQXoDe0DxuoBNdCt5e037OdPUtF"

这种路径显示的完整路径。直接指向目标文件。

2.大多数情况下是相对路径，相对路径又分为以下几种情况：

 一、

无'/'的。它指向的是当前文件同一级目录下的路径。

static/Echarts/echarts.js

二、

一个'/' 。它指向的是项目根目录下的路径。

 src="/static/aes.js"

三、

'./' 。指向的是当前文件父元素的路径。与第一种方式一样。

'./router'

四、

'../' 。 指向的是当前文件父级元素的父元素的路径。

'../page/home.vue'

五、

'../../'  指向的是当前文件父元素的父元素的父元素的路径。以此类推。

'../../static/images/pwdmodify.png'

六、

'@/xx/' 

"@/ajax/index"

@/ 是webpack设置的路径别名，代表什么路径，要看webpack的build文件夹下webpack.base.conf.js里面对于@是如何配置的

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

这里指向的就是根目录下的src文件