第一种情况
如果打包好的vue项目应用(dist) 和后端 API 服务器没有运行在同一个主机上
-
此时需要在开发环境下将 API 请求代理到 API 服务器。通过配置 vue.config.js 中的 devServer.proxy
devServer: { port: 8081, // 生产环境启动端口 proxy: { '/xxx': { target: 'http://xxx.xxx.x.xxx:8090', ws: true, // proxy websockets changOrigin: true, // 是否允许跨域 pathRewrite: { // 重定向 "^/xxx": "" } } } },
-
在生产环境中可通过NGINX配置代理服务器解决vue项目请求跨域问题
在\nginx-1.16.0\conf\nginx.conf 配置server { listen 8082; server_name http://xxx.xxx.x.xxx; #charset koi8-r; #access_log logs/host.access.log main; root D:\xxx\xxx\dist; #vue项目打包完生成的dist location / { index index.html index.htm; try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404 } #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件 #因此需要rewrite重定向到index.html中,然后交给路由在处理请求资源 location @router { rewrite ^.*$ /index.html last; } location /api { # 把 /api 路径下的请求转发给真正的后端服务器 proxy_pass http://xxx.xxx.x.xxx:xxxx; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html }
第二种情况
如果打包好的前端应用(dist) 和后端 API 服务器运行在同一个主机上
-
在开发环境中 可通过在public文件夹中新建一个静态文件static文件夹再创建配置文件config.js
window.g = { AXIOS_TIMEOUT: 10000, BASE_URL: "http://xxx.xxx.x.xxx:8090" // 配置服务器地址 }
然后在public文件夹的index.html中引入 config.js
<script src="<%= BASE_URL %>static/config.js"></script>
// axios配置 let service = axios.create({ baseURL: window.g.BASE_URL });
-
在生产环境中 只要通过配置vue项目生成的 dist/static 文件夹下的config.js window.g.BASE_URL 属性就可以了