Vue3项目打包后部署到服务器 请求不到后台接口解决方法

本地开发没问题能正常请求到接口，部署后页面也能展示出来就是接口的数据请求不到

network一看是这么个情况

对比了本地的页面

可以发现是remote address出了问题。

经过查询得知：Remote Address代表的是当前HTTP请求的远程地址，即HTTP请求的源地址。

我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的，而部署到服务器后相当于换了个环境（ ip地址和端口已经改变 ），此时proxy代理就出错了。

解决方法：

地址错误了，那就换到正确的地址。

即：本地开发环境 代理时用127.0.0.1，生产环境用服务器的ip

在Vue中要实现这个效果就需要用到全局环境变量了

　　然后proxy代理和axios请求那也要改一下

至此问题解决

如果大家在学习中有任何补充，可以联系我们小编，感谢大家的学习。

赞 (0)

相关推荐

  • 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

    Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最后单页面的最终文件. 问题一:我在打包完成后,打开index.html文件发现地址并没有携带路由. 这样的话页面就是空白了,因为没有组件被添加到页面中.打开F12会看到一堆的红色failed请求.打开请求地址是这样的. 进入D盘就开始寻找static文件夹当然是找不到的.既然知道了是打包之后寻找文件

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • vue-cli+iview项目打包上线之后图标不显示问题及解决方法

    做vue项目使用的iviewUI库,打包上线之后发现icon都不显示,然后做了很多尝试,更改打包路径等,都没有太好的效果,最后还是在网上找到了方法: 1. 方法一: 在build/utils.js下面找到这段代码,将其中publicPath改成-/-/,保存并重新打包.注意:这个路径不是绝对的,根绝自己的目录结构来写 // Extract CSS when that option is specified // (which is the case during production build

  • 解决cordova+vue 项目打包成APK应用遇到的问题

    公司前端界面用的是vue,我要嵌入到Android中生成App 第一步:安装node node安装:直接进入官网https://nodejs.org/zh-cn/,下载最新版本安装.安装之后在命令行中使用"node -v" 检查安装是否成功. npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了.同样可以通过输入 "npm -v" 来测试是否成功安装. 第二步:安装cordova 1. 打开cmd 输入命令:npm instal

  • vue项目打包后怎样优雅的解决跨域

    前言 在使用vue.js开发前端项目时,再结合webpack搞起各种依赖.各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable一通配置简直不要太酸爽.还不明所以然的新手们可能还没搞清我说的是什么,就是下面这几行配置: proxyTable: { '/api': { target: 'http://113.113.113.113:5000', //假的接口地址哈 changeOrigin: t

  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到 network一看是这么个情况 对比了本地的页面 可以发现是remote address出了问题. 经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址. 我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了. 解决方法: 地址错误了,那就

  • vue项目打包后部署到服务器的详细步骤

    vue项目打包后部署到服务器的详细步骤

    耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接: 链接: https://pan.baidu.com/s/1PD-Sts-e2V17wSs5FvrLmg 提取码: 2jbf 1 , vscode打开你的vue项目 -- > 点终端- > 新终端- >输入npm run build 按回车 , 显示正在打包..稍等一会 2

  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    目录 使用场景: 一.打包 二.部署(nginx) 总结 使用场景: 我们常使用前后端分离项目时,会需要将前端vue打包然后部署. 一.打包 vue项目其实可以直接通过一下语句进行打包: npm run build 默认打包情况如下: 当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置: 1.首先在项目根目录下创建vue.config.js文件 配置内容如下所示(附带跨域问题解决): module.exports = { //打包 publicPath: './', output

  • vue-cli3项目打包后自动化部署到服务器的方法

    一.安装 scp2 npm install scp2 --save-dev 二.写好脚本 例如 upload.js (下面任选一个即可) 位置和 package.json平级即可. 简略版 'use strict' // 引入scp2 var client = require('scp2'); client.scp('./dist/', { // 本地打包文件的位置 "host": 'XXX.XX.XX.XXX', // 服务器的IP地址 "port": 'XX',

  • vue项目打包后请求地址错误/打包后跨域操作

    vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据. 在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了. 解决办法如下: 打开config文件夹下的index.js文件,添加以下代码 pathRewrite: { '^api':'https://*****.com' //填写需要跨域的地址 } 2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码: '

  • Vue中的项目打包及部署全流程

    Vue中的项目打包及部署全流程

    目录 一.打包 遇到的第一个问题 问题二:文件找不到 二.服务器部署 1.解压 2.用法 3.Vue项目build后 4.配置nginx 正式开始将项目推送到自己服务器上 CentOS操作系统的部署 一.打包 npm run build 打包项目后,出现dist文件夹,dist文件夹下的东西就是需要部署的项目. 遇到的第一个问题 index.html页面出现一片空白,右键检查network发现一堆错误. 解决:没有修改config配置文件,如果直接打包,系统默认的是’/’(根目录),而不是’./

  • vue-cli3.0项目打包后如何修改访问后端地址

    vue-cli3.0项目打包后如何修改访问后端地址

    目录 打包修改访问后端地址 问题 解决 项目打包后直接修改ip地址 实现方案 1. 方案一 2. 方案二 3. 方案三 打包修改访问后端地址 问题 原本是将访问后台的地址写在代码里面,但是这样的话打包之后就不能修改了,只能在代码里面修改,然后重新打包 解决 在vue-cli3.0之前的版本,项目目录有static不会被打包,而在vue-cli3.0项目目录没有static文件夹,但是有public文件夹是不会被打包(因此有些没有npm的插件或者包应该放在public目录下),所以在public目

  • Vue项目打包后可修改基础接口地址配置的具体操作

    Vue项目打包后可修改基础接口地址配置的具体操作

    目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • 解决vue项目打包后提示图片文件路径错误的问题

    vue项目打包后在production模式下提示图片 '404(not found),在dev环境下好好的,打包了就提示这个错误.这是为什么呢,以前第一次使用vue-cli构建项目的的时候只有两个图片文件,当时部署后报错路径问题, 当时的想法就是简单粗暴,直接在build好的文件修改了文件路径,再后来项目中遇到了一大堆静态资源,修改路径显然是不行的,看了一下生成文件大概知道是文件目录改变了,所以引用的路径也要随之改变,网上最简单的方法是修改 'config/index.js'文件中的 build

随机推荐