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

[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 #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 提问