vue代理配置的理解(vue.config.js)

module.exports = {
  // 其他配置
  ...... 
  // 代理配置
  devServer: {
    https: true, // 默认是false, 默认就是http协议,true将http协议转换为https协议
    // 代理配置
    proxy: {
      '/api': { // 配置需要代理的路径 --> 这里的意思是代理http://localhost:80/api/后的所有路由
        target: 'https://172.20.9.153:8085', // 目标地址 --> 服务器地址
        changeOrigin: true, // 允许跨域
        ws: true,  // 允许websocket代理
        // 如果这里没有进行路径重写,当你访问http://localhost:80/api/login/,实际上访问的就是https://172.20.9.153:8085/api/login/
        pathRewrite: { // 重写代理路径
          // 就是把路径中的api都替换为空的字符串
          '^/api': '', // 因为服务端地址里面是没有api字段的,api只是为了区别需要代理的路径,如果服务端有api字段则不需要重新    
        }
      }
    }
  }
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 2中,可以使用vue.config.js文件来配置Vue项目。以下是一些常见的配置选项: 1. 创建vue.config.js文件:在项目根目录下,创建一个名为vue.config.js的文件。 2. 导出配置对象:在vue.config.js文件中,导出一个包含配置选项的JavaScript对象。例如: ```javascript module.exports = { // 配置选项 } ``` 3. 配置选项:根据你的需求,添加或修改适当的配置选项。一些常见的选项包括: - publicPath: 设置公共路径,用于部署到静态服务器或CDN上。 - outputDir: 设置输出目录,默认为dist。 - assetsDir: 设置静态资源的目录(相对于outputDir)。 - devServer: 配置开发服务器选项,例如代理、端口号等。 - productionSourceMap: 是否生成生产环境的源映射文件。 - css: 配置CSS相关选项,例如提取CSS、CSS预处理器等。 以下是一个示例配置文件的例子: ```javascript module.exports = { publicPath: '/', outputDir: 'dist', assetsDir: 'static', devServer: { port: 8080, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } }, productionSourceMap: false, css: { extract: true, sourceMap: false } } ``` 请根据你的项目需求,自行添加或修改其他配置选项。配置完成后,重新启动开发服务器或运行打包命令,配置将会生效。 注意:以上是一些常见的配置选项,更详细的配置项可以参考Vue CLI官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端陈皮喵

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值