开发/生产环境与后端交互（新手必读）

vueComponent / ant-design-vue-pro

👨🏻‍💻👩🏻‍💻 Use Ant Design Vue like a Pro! (vue2)

https://pro.antdv.com

MIT License

10.75k stars 3.11k forks source link

开发/生产环境与后端交互（新手必读） #91

Open sendya opened 5 years ago

sendya commented 5 years ago

如何在开发环境，生产环境访问后端接口 与 devServer 相关的问题请自行查询 API 文档，未给出链接的，请自行百度谷歌

基础知识须知

Vue Cli3 devServer.proxy 配置参考
Webpack devServer.proxy 配置参考
Nginx/Apache 等 web 服务器反向代理
CORS 跨域问题

开发环境采用 `Webpack` 的 `devServer`

Cli3 配置

devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080/api',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/api/xxxx': {
        target: 'http://localhost:8080/api',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }

也可以参考 Github 上其他开源者的 devServer 配置项 ref https://github.com/PanJiaChen/vue-element-admin/blob/master/vue.config.js

生产环境

参考 Issue https://github.com/sendya/ant-design-pro-vue/issues/41

Pro 官方文档

参考文档 https://pro.antdv.com/docs/deploy

注：请不要在本 Issue 提问

bihongbin3027 commented 5 years ago

打包以后，项目没有放在服务器跟目录，导致访问不到css和js，怎么修改路径呢？

sendya commented 5 years ago

打包以后，项目没有放在服务器跟目录，导致访问不到css和js，怎么修改路径呢？

打包了用的 History 模式路由，必须放在 web 容器内，否则更换路由模式

https://router.vuejs.org/guide/essentials/history-mode.html

dkl520 commented 5 years ago

我想知道你们mock数据是怎么mock的不是vue.config.js 因为我注释了照样可以mockd到数据

sendya commented 5 years ago

我想知道你们mock数据是怎么mock的不是vue.config.js 因为我注释了照样可以mockd到数据

使用的 easy-mock ，这是一个在线的 mock ，只要你有网，就能拉到数据

Lily-Sea commented 5 years ago

直接copy项目之后，什么都没改，打包，放到tomcat上，域名或者IP 访问，接口都报错404？需要后端配置什么吗？需要后端完全按照这里面的nginx配置吗？本地运行没有问题，是不是easy-mock服务停了？ https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro/api/ 这个已经404了，请教下

sendya commented 5 years ago

直接copy项目之后，什么都没改，打包，放到tomcat上，域名或者IP 访问，接口都报错404？需要后端配置什么吗？需要后端完全按照这里面的nginx配置吗？本地运行没有问题，是不是easy-mock服务停了？ https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro/api/ 这个已经404了，请教下

打包后不会提供 mock 数据