在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: {
'':''
}
}
}
}
```