vue部署之后访问的接口时 调用http://localhost:8080/而不是自己的实际接口 (已解决)

最新推荐文章于 2023-04-06 20:45:00 发布
最新推荐文章于 2023-04-06 20:45:00 发布
阅读量6.1k 收藏 6
点赞数 6
分类专栏： linux 文章标签： vue.js 前端 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z_Gleng/article/details/124895263
版权

部署之后他访问的是

解决这个问题很简单

我们先看下vue以下文件的配置

.env 无论开发环境还是生产环境都会加载的配置文件
.env.development 开发环境加载的配置文件
.env.production 生产环境加载的配置文件

为什么我们本地启加载 .env.development 服务器加载 .env.production ？？
我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV 值设置为 development，这时就会先后加载.env和.env.development这两个文件。
而当我们打包到服务器后，服务器的NODE_ENV值被设置为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

强调一下： process.env.NODE_ENV默认只有两种状态即development和production，development指代本地开发即localhost环境（本地的开发），而production代表发布在任何服务上的服务（不管是dat、uat还是生产环境），node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等

所以我们只需要修改.env.production 的VUE_app_BASE_API即可

 

Z_Xshan
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
vue本地调用服务器接口跨域问题,也就是localhost:8080调用http://10.100.55.110:8000/api/userauth的跨域问题
qweasdzxc_1092665276的博客
10-09 8699
其实，只需要配置vue的config/index.js文件就行了，其他的axios的baseURL不用管，不写。代码如下： // see http://vuejs-templates.github.io/webpack for documentation. 'use strict' var path = require('path') module.exports = { buil...
VUE在请求接口是跨域，调用http://localhost:8080/而不是自己的实际接口，怎么办？
qq_34233737的博客
05-13 6828
Access to XMLHttpRequest at ‘https://www.wanandroid.com/banner/json’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. proxy: { ‘/api’: { target: ‘https://www.
【vue】使用localhost和新ip地址访问项目
栀妹儿的炼丹炉
07-20 641
解决方式来自：远山眉【vue项目同时被localhost和ip地址访问的方法】 问题描述： 项目在本地上启动，想被其他电脑访问 原本只要连接局域网输入地址就可以，但是现在连接网线都实现不了 查过很多关于ip连接不显示的资料，都不行 结果查到的是自己的vue项目问题，更改有效 解决办法：更改三个文件（我只改了两个就行） 1、 config->index.js 将dev下的host对应数据改成：'0.0.0.0' (后端哥哥说0.0.0.0代表时刻变动的本机ip，你也可以直接改成不变的本机ip，比如我
前端axios以“http://localhost:8080/xxx/xxx“, {id:id}传id，但后端接受不了的原因和解决办法。
weixin_45695485的博客
12-17 1408
众所周知，前段是给后端返回一个json字符串，但当我们以{id：id}传数据的时候一定是只想把id传回去吧，但可惜是打灭的，当在后端用Interge id接受的时候，会提醒我们 JSON parse error: Cannot deserialize instance of `java.lang.Integer` out of START_OBJECT token; nested exception is com.fasterxml.jackson.databind.exc.MismatchedInpu
vue项目CROS跨域错误？将API接口的具体IP修改为localhost即可轻松解决
yebanliyu的博客
04-05 3583
本地运行vue项目。关于API接口的两个文件如下。 export function getBaseUrlTest() { // return 'http://192.168.1.112:61078/' return 'http://localhost:61078/' } import { getBaseUrlTest } from '@/config' let base = getBaseUrl(); export const requestLogin = params => {
Vue学习总结-Vue前端解决跨域问题
白不懂黑的静的专栏
12-02 1万+
场景 在vue开发中，我们采用前后端分离的模式进行开发， 则前端渲染的数据都需要从后端获得，这样就会带来跨域问题。 思路 解决跨域问题，正常情况下有两种，既然涉及到两端，那么大的就是从两端各自处理。 第一种：从后端处理。就是在后端代码中通过过滤器等方式允许请求进行跨域访问， 这种方法在之前的springboot文档中有记录，此处不再叙述。 第二种：从前端vue处理，vue提供了相关的配置，通过代理的方式进行跨域请求。 这里着重记录下第二种，因为我们开发中，没法要求后端都去给你写允许跨域请
vue 2 localhost 8080打开的地址是vue项目哪个文件夹
weixin_42579969的博客
02-15 862
在Vue 2项目中，localhost:8080打开的地址是指项目的根目录，也就是包含src和public文件夹的那个文件夹。在这个根目录中，src文件夹包含了项目的源代码，public文件夹包含了静态资源，如图像、字体和HTML文件。 ...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
11-20
Vue项目不能使用localhost:8xx0进入项目，但是将localhost替换为127.0.0.1却可以进入。 解决办法： 进入文件 C:\Windows\System32\drivers\etc\hosts 用记事本打开 hosts 文件进行编辑，看看文件里是否有 127.0.0.1...
解决vue中使用proxy配置不同端口和ip接口问题
10-16
主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue axios封装httpjs,接口公用配置拦截操作
10-14
在Vue项目中，为了提高代码复用性和管理效率，通常会进行HTTP请求的封装，本文主要介绍如何使用axios进行封装，并设置接口的公用配置和拦截操作。首先，我们需要在项目中的`src/utils`目录下创建一个名为`http.js`的...
在tomcat5 中发布项目，只能用localhost不能用IP地址访问项目的问题
学习亦游戏
03-12 2696
最近在开发项目中，遇到的一个坑爹的Tomcat问题：       在 tomcat中发布一个Webservice项目，但是发布后，只能访问http://localhost:8080/dw/services/EasyScanIn?wsdl。使用客户端测试出现异常： java.net.ConnectException: Connection refused: connect 后来
Vue跨域问题的解决
LittlePoem的博客
06-02 309
出现跨域的原因 请求接口时，控制台提示：Access-Control-Allow-Origin，说明请求跨域了 为了安全考虑，一个源的脚本（网页，网站）不能与另一个源的资源进行交互，所以就引发一个词叫做“同源策略”。 同源策略：同源策略是一种约定，它是浏览器最核心的也最基本的安全功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。 同源：所谓同源（即指在同一个域），就是两个页面具有相同的协议（protocol）,主机（host）和端口号（port） 当协议，主机，和端口号有一个不同时，
VUE Proxy error Could not proxy request XXX.html from localhost8080 to XXXX (ECONNRESET). 问题解决
m0_67391120的博客
03-09 1839
https://xxx.com 和 http://xxx.com 一定要区分清楚，并且一定得添加 http:// 。 所有会设置端口号的地方（前台和后台允许跨域访问等），端口号设置是否和 vue.config.js 里面的 host: 'localhost', port: 8080, 一致。 经过测试，我链接手机热点的时候，也会报这个错，正常连接WiFi就没问题了。 ...
新手问题笔记：手机可以访问前端页面，但是无法获取后台数据；localhost引起后端访问路径错误，不是跨域问题
10-28 1983
这次遇到的这个问题困扰了我很久，前后花过大量时间网上搜索、查询资料，虽然也有一些收获，但与最终问题的解决完全不搭边。问题的本质其实很简单，localhost 表示本地主机，服务器ip或域名设置成localhost，自然只能在服务器本地访问。其他机器通过192.168.0.113这样明确的 IP 可以访问到服务器的前端页面，但是由于后端域名配置为localhost，所以其他机器访问不了后端。遇到问题不能总是照搬网上的解决方案，要结合自己的思考。同时，基础知识掌握牢固，在解决问题的时候才会更快更准。
vue项目报错http://localhost:8080/sockjs-node/info?t=xxxx，解决办法，亲测绝对有效！
BubbleABC的博客
03-27 5946
我们vue项目开发的时候有时会出现 http://localhost:8080/sockjs-node/info?t=xxxxx错误。如下图 网上百分之99的办法都是说： 1. 找到/node_modules/sockjs-client/dist/sockjs.js 2.找到代码的 1606行 ，并注释掉 这是一种错误的办法！ 因为你这样做热更新功能也失效了。 其实造成这个原因是：网络环境变更（如切换wifi导致开发服务器的IP地址更换），服务器不知道如何确定访问源，就有可能造成上述情况
vue生产环境使用localhost请求端口号不是自己设置的？来试试这个
weixin_43663775的博客
11-10 2684
将vue包部署后，请求的端口号自动变成了8888， 设置的请求地址是http://localhost/ 后来用127.0.0.1请求可以了。 有必要深入了解一下localhost和127.0.0.1： localhost不能访问127.0.0.1可以访问的原因及解决方法 有时候我们在调试程序的时候，会出现一些莫名其妙匪夷所思的奇怪问题，localhost不能访问但127.0.0.1可以访问的问题就是其中之一。 我 估计大多数人都不会去想localhost到底与127.0.0.1有什么不同，就比如我，有时候用
vue项目接口地址暴露_vue项目在开发环境和生产环境接口地址配置简记
weixin_34416909的博客
02-05 714
开发环境在开发环境中，由于前后台并不是放在同一个服务器中的，所以这个时候就需要配置代理，打开vue项目的config/index.js文件，找到dev对象里的proxyTable配置如下：dev: {// PathsassetsSubDirectory: 'static',assetsPublicPath: '/',// 配置后台通信proxyTable: {'/api': {// 本地targe...
【异常解决】vue项目localhost:8080无法访问此网站或者无法访问此页面，localhost拒绝了我们的连接请求
热门推荐
No8g攻城狮的博客
04-06 3万+
出现如图所示，8081端口被占用，且占用该程序的PID号为143132，接着【Ctrl + Alt + Delete】打开任务管理器，找到PID号为143132的进程，结束该进程，然后再重启服务项目即可。项目未成功启动，则需要查看前端项目为什么没有启动成功，这个原因复杂不再具体说明，可以试着重启服务项目，多重启几次。打开“我的电脑”，选择左上角的“计算机”中的“卸载或更改程序”。点击确定，然后浏览器验证，localhost已经可以访问了！（此处我查看的端口是8081，注意更换成自己的端口号）
怎样将vue3项目默认启动地址http://127.0.0.1:5173/改成http://localhost:8080/
最新发布
06-09
在 Vue 3 项目中，可以通过修改 Vite 的配置来将默认启动地址从 `http://127.0.0.1:5173/` 改为 `http://localhost:8080/`。具体操作步骤如下： 1. 在项目根目录下创建一个 `vite.config.js` 文件。 2. 在 `vite.config.js` 文件中，配置 `server` 选项，例如： ```js module.exports = { server: { host: 'localhost', port: 8080 } } ``` 在上面的配置中，`host` 选项表示要监听的主机名，这里我们将其设置为 `localhost`；`port` 选项表示要启动的端口号，这里我们将其设置为 `8080`。 3. 保存 `vite.config.js` 文件。然后在控制台中运行以下命令启动项目： ```bash npm run dev ``` 或者 ```bash yarn dev ``` 这样，项目就会在 `http://localhost:8080/` 上启动了。 需要注意的是，如果你想要完全禁用 IPv6 地址，可以在 `server` 选项中添加一个 `https` 选项，例如： ```js module.exports = { server: { host: 'localhost', port: 8080, https: false } } ``` 这样，Vite 就会禁用 IPv6 地址，只使用 IPv4 地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Z_Xshan

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值