Vue 项目自动运行小技巧 与 Vue项目前端代理配置

69 阅读1分钟

在项目根目录的vue.config.js(没有的需要手动创建)中配置:

本文的所添加的代码均在  devServer:{}  代码块中:

  • 每次保存时自动运行:
module.exports = {
  devServer: {
    自动运行 配置
    open: true,
  }
}
  • 配置Vue前端代理:
module.exports = {
  devServer: {
   配置代理
    proxy: {
      '/api': {
        接口 基础路径
        target: 'http://1.116.64.64:5004/api2/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          路径改写
          '^/api': ''
        }
      }
    }
  }
} 
  • 代理使用 实例(该实例使用 axios 演示):
axios.create({
  method: '/api/get',
  url: '/students',
  params
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error);
})