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

[sendya]

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

基础知识须知

1. Vue Cli3 devServer.proxy 配置参考
2. Webpack devServer.proxy 配置参考
3. Nginx/Apache 等 web 服务器反向代理
4. 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]

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

[sendya]

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

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

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

[dkl520]

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

[sendya]

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

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

[Lily-Sea]

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

[sendya]

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

打包后不会提供 mock 数据

[aixinaxc]

项目执行build打包后，js文件显示无法加载。打包项目无法使用

[sendya]

@aixinaxc 请描述清楚

[aixinaxc]

就是生产dist后，我想不采用web容器直接启动该如何做

[liupchina]

devServer: { // development server port 8000 port: 8000, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } } } },

请求/api/**后端数据路径时，使用的是8000端口，而不是3000端口。 开发环境中怎么使访问路径变成3000端口？

[sendya]

@liupchina 请不要在此 issue 提问。 另外， proxy 的 3000 只是代理过去。并不是你请求的地址还要是 3000，不需要改变到 3000。 请仔细阅读 webpack devServer.proxy 下的作用和配置

[jjandxa]

@liupchina

[fukaifeng]

devServer: { // development server port 8000 //port: 8000 proxy: { '/api': { // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', ws: false, changeOrigin: true } } },

配置了devServer 为什么请求还是mock的数据？

[sendya]

@fukaifeng https://github.com/sendya/ant-design-pro-vue/blob/master/src/main.js#L11

请不要在本 issue 提问