告别 Mock 数据 404：轻松搞定 Vue 前后端联调代理配置

本文已收录在Github，关注我，紧跟本系列专栏文章，咱们下篇再续！

• 🚀 魔都架构师 | 全网30W技术追随者
• 🔧 大厂分布式系统/数据中台实战专家
• 🏆 主导交易系统百万级流量调优 & 车联网平台架构
• 🧠 AIGC应用开发先行者 | 区块链落地实践者
• 🌍 以技术驱动创新，我们的征途是改变世界！
• 👉 实战干货：编程严选网

1 项目前后端联调

本地 mock 数据的 index.json 删除后，直接报404：

联调时，不能再访问 mock 数据，而应该访问后端服务器的数据。

修改【config/index.js】

    proxyTable: {
      '/api': {
        // 后期可改成实际的后端服务地址
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': '/static/mock'
        }
      }
    },

本地后端服务端口号8080，前端服务端口号8081。

修改 【package.json】

  "scripts": {
    "dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",

加上这段，就支持通过 ip 访问。

修改后，重启前端服务

npm run dev

现在访问前端服务，就有数据了：

但一般后端服务都在远程，不在本地。不能写 localhost 了，而应该改成内网 ip 或外网域名。

2 真机测试

保持手机和前端服务在同一局域网：

打包上线

npm run build

异步组件实现按需加载。

本文由博客一文多发平台 OpenWrite 发布！