在Vue開發時遇到了許多http請求跳轉鏈接，連接中重復寫127.0.0.1:8080/項目名很繁瑣，我們需要將這種url的前綴進行提取操作，使代碼更加規范簡潔。
注：注意修改完所有之后需要npm run dev重啟生效
一、提取到單獨的配置文件（普通url提取）
通常情況下，我們會建立一個單獨的config文件夾，在下面寫個js文件，以此來匯總所有用到的url前綴，甚至於是一些變動性的配置項，比如發短信需要登錄某動的短信平台，然后進行發短信操作，這個登陸操作的用戶名、密碼、登陸地址等信息就可以理解是變動性的配置項。
接下來上正文。
config下js文件內容格式：
```
export default {
baseUrl: "http://localhost:8085/項目名稱1",
webRoot: "http://127.0.0.1:8080/項目名稱2",
loginUrl: "http://10.125.1.163:/login.do",
}
```
Vue文件中引用步驟：
1.導入config.js文件
使用impor導入，比如我新建的是主目錄下config文件夾下的index.js文件。
`
import config from "@/config";
·
2.引用配置項
直接使用" config. 屬性名"即可調用。
二、vue.config.js中配置devServer的proxy屬性（亦可用於訪問時跨域）
使用的時候不需要導入，系統會自動檢測proxy中是否包含該字符串，有則會自動替換改引用內容，注意在瀏覽器的NetWork中的路徑會顯示webRoot，但請求此時時proxy下的地址。
```
// webpack-dev-server 相關配置
devServer: {
open: true,
host: "0.0.0.0",
port: 8080, // 端口號
https: false, // https:{type:Boolean}
hotOnly: true, // 熱更新
proxy: {
'/webRoot'/*webRoot為前綴引用名稱 */: {
target: 'http://127.0.0.1:8085/項目名稱1', // 需要引用的路徑
changeOrigin: true, // 是否是跨域請求
secure: true, // 如果是 https ,需要開啟這個選項
pathRewrite: { // 配置是否需要追加內容
'webRoot':'login'
// 這里的追加內容是login,在引用target字符串之后還會加上login
// 這里引用webRoot即為： http://127.0.0.1:8085/項目名稱1/login
}
},
'':{
target:'',
changeOrigin: true,
pathRewrite: {
'':''
}
}
}
}
```