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文件