在Vue中，我們可以使用.vue文件來表示組件，每個.vue文件包含了組件的模板、腳本和樣式。當我們使用Vue CLI創建項目時，所有的.vue文件都會被打包成一個或多個JavaScript文件，這些文件可以被瀏覽器正確解析。

然而，有時候我們需要使用另外的地址來訪問這些.vue文件，比如我們需要將.vue文件放到另外的服務器上，或者我們需要將.vue文件放到不同的子目錄中。這時候就需要使用地址代理來處理這些情況。

// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000', // 代理地址
changeOrigin: true, // 開啟代理
pathRewrite: { // 路徑重寫
'^/api': '/mock' // 將api重寫為mock
}
}
}
}
}

在Vue CLI中，可以使用vue.config.js來配置地址代理。我們可以在devServer中添加proxy來配置地址代理。

在上面的代碼中，我們配置了一個代理地址/api，將它代理到了http://localhost:3000/mock。這樣當我們訪問/api地址時，實際上訪問的是http://localhost:3000/mock地址。

同時，我們開啟了代理(changeOrigin: true)，這樣就可以解決跨域問題了。如果我們不開啟代理，那么當我們訪問不同的域名時，瀏覽器會出現跨域訪問的限制。

此外，我們還使用了路徑重寫(pathRewrite)功能。這個功能可以將我們訪問的地址/api重寫為/moc地址。這樣做的好處是，我們可以更加靈活地配置地址，而不需要修改我們的代碼。

在我們的組件中，我們可以使用fetch函數來訪問地址。在上面的代碼中，我們訪問了/api/home地址，實際上訪問的是http://localhost:3000/mock/home地址。

注意，在開發階段，我們的地址代理只適用于開發服務器。當我們打包項目后，代理配置會失效。所以如果我們需要在生產環境中使用地址代理，需要在服務器中設置代理。我們可以使用反向代理服務器（比如Nginx）來處理這些情況。