vue3+vite构建的项目在本地没问题，打包部署到线上接口请求返回dist文件下的index.html内容

最新推荐文章于 2024-08-30 19:48:38 发布
最新推荐文章于 2024-08-30 19:48:38 发布
阅读量1.7k 收藏
点赞数
文章标签： javascript vue.js nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45531945/article/details/126542226
版权

一、 背景

vue3+vite构建的项目在本地没问题，打包部署到线上接口请求返回dist文件下的index.html内容

二、解决

经过排查发现是nginx做了转发，接口请求没有进入后端的接口，解决办法是修改nginx配置文件,配置文件如下：
在这里插入图片描述

三、总结

本地开发接口请求正常，线上接口请求有问题多半是服务器上的nginx问题

weixin_45531945
关注
vue-cli打包后本地运行dist文件中的index.html操作
10-14
在打包完成后，我们通常需要将dist文件夹中的内容部署到服务器上，但在部署之前，往往需要在本地环境中测试打包后的应用是否正常运行。这一步骤对于确保部署前的应用稳定性和功能完整性是必不可少的。 描述中提到的...
vue项目本地开发完成后部署到服务器后报404
前端开发工程师博客
05-19 1460
面试官：vue项目本地开发完成后部署到服务器后报404是什么原因呢？ 一、如何部署 前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可 我们知道vue项目在构建后，是生成一系列的静态文件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9wiGIH7-1652929941320)(https://imgkr2.cn-bj.ufileos.com/b9d13e56-f859-4b4b-a9da-a703a34c2
解决vue-cli构建后的index.html找不到图标和引用的js、css文件路径错误的问题
duansamve的博客
07-03 2727
1、config/index.js： module.exports = { build: { // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', } } 将上面的assetsPublicPath属性设置为“./” 2、build/utils.js： function generateL
Vue 3 + Vite 基于vite-plugin-html的多模板打包，生成多个项目
最新发布
k0933的博客
08-30 245
1、安装 vite-plugin-html。3、配置vite.config.js。
Vite + Vue3 + Ts 解决打包生成的index.html页面显示空白、资源跨域、找不到资源、404-Page Not Found等错误；关于vite build后访问报错
热门推荐
qq_44535402的博客
07-20 1万+
关于Vite打包后本地访问打包文件空白页面 ；关于vite build后访问报错：Expected a JavaScript module script but the server responded with a MIME type of “
vite 打包部署出现的问题
记录技术的小本本
11-17 1112
部文件打包之后大小超过500KiB，项目部署之后页面默认跳转至根目录，或者js、css文件获取的路径为根目录，项目部署之后页面刷新导致页面404
【return 】页面中就会显示 index页面
m0_67613802的博客
05-12 6586
? HttpResponse 主要用于返回字符串类型的数据 def index(request): return HttpResponse('index页面') 在页面中就会显示 index页面 render 主要用于返回html文件 并且支持模板语法(django自己写的) 在浏览器中输入http://127.0.0.1:8000/index/后，会返回index.html页面。 def index(request): return render(request,'index.h...
vue3+vite创建项目-（傻瓜式教程）
01-19
这会在项目的`dist`目录下生成用于部署的静态文件。 总结，Vue3 + Vite 的组合提供了现代前端开发的强大工具链。Vue3的新特性如Composition API使得代码更加清晰，而Vite则带来了更快的开发速度和更好的开发体验。...
vite+vue3动态模块化导入并使用pinia
03-25
6. **构建和部署**：使用`vite build`命令可以将项目打包到`dist`目录，然后将此目录部署到服务器以供生产环境使用。 通过这样的结构，开发者可以在Vue3和Vite的现代化开发环境中充分利用Pinia进行状态管理，实现...
Vue项目打包部署到iis服务器的配置方法
10-16
因为Vue项目通常使用前端路由（vue-router），所以需要通过URL重写（URL rewrite）的方式，使得在访问不同路由地址时，能够返回同一个入口文件（通常是index.html）。 在上述描述中，提到了两种URL重写的方法： 第...
vue编译打包本地查看index文件的方法
08-27
在Vue.js开发过程中，我们经常需要将项目编译打包，以便于部署到生产环境或者预览本地构建结果。本文将详细介绍如何在Vue编译打包后，本地查看`index.html`文件，以及`/build/config/index.js`配置文件中的`...
服务器部署项目之后data返回的内容为index.html
weixin_43362779的博客
07-10 506
在本地运行前后端没有任何问题，服务器上又只修改了nginx，那大概率就是nginx配置时的问题，事实上确实是nginx配置的问题，nginx配置中一开始我写了两个server，我将两个server放在一起之后，便解决了此问题。将前后端项目放在服务器，前端build之后，使用nginx部署前端，使用了nginx代理后端接口，并进行转发，在配置完nginx后发现，前端浏览器中调用接口显示status为200，但是返回的data为build后的index.html，实际上我需要的是调用接口得到的json数据。
解决Vite中引入Naive UI后找不到“date-fns/esm/index.js“模块的方法
百度一下 猎人社区
07-01 845
而Naive UI是一个基于Vue 3的UI组件库，它的源码中使用了"date-fns/esm/index.js"这个模块。以上方法中的任何一种都可能解决Vite引入Naive UI后找不到"date-fns/esm/index.js"模块的问题。需要注意的是，如果你选择了手动安装date-fns库的方法，请确保将其添加到你的项目依赖中，并且在代码中正确导入所需的date-fns模块。然后，在你的代码中直接引入需要的date-fns模块，无需再使用"date-fns/esm/index.js"。
项目启动加载html页面 404,vue项目，在本地打开一个页面正常，部署到服务器就会出现 404Not Found 求解?...
weixin_33835155的博客
06-09 549
在本地打开正常是这样的在服务器上打开是这样的,别的页面都能打开，就这个页面不行路由配置是`{path: '/activate-account/:userEmail/:ConfirmKeyCode',name: 'activateAccount',component: activateAccount},在activateAccount页面中加了created () {location.pathnam...
前端项目请求接口时返回的response是html文档怎们办？
青蛙king的博客
10-25 1万+
前端项目请求接口时返回的response竟然是html，这是为什么呢？ 遇到这种情况，一般是域名不对。 比如：正常请求这个接口需要用的是测试环境或者线上环境的域名，而你用的是localhost或者127.0.0.1，此时接口找不到资源就会返回当前项目的index.html文档了。 那么有什么解决办法呢？ 第一种解法：配置 proxy，将本地域名代理到能够请求道资源的域名。 我这边是本地起的 node 项目的提供的接口服务，该 node 项目的端口号是 3000。 "proxy": { "/api
vue 部署项目，访问页面空白,找不到js或css文件 (net::ERR_ABORTED 404 (Not Found))
流楚丶格念的博客
03-26 6497
问题 在本地部署之后访问完全没有问题 部署到阿里云服务器上，再访问页面出现空白页（也不是404），控制台给我打印没有这几个文件 原因 你的项目没有部署到你写的 publicPath 下，但是你是不知道的，那么publicPath 改为站点域名的根路径下就可以了 解决 在vue.config.js (vue-cli3以上) 是 publicPath 配置的原因 配置成 publicPath: './' 或者 publicPath: '' 更详细的配置可以查看：https://cli.vuejs.org/
vue3 + springboot 简单部署到Windows服务器以及可能遇到的问题
challenglistic的博客
07-25 3273
vue3.0 + springboot前后端项目部署到Windows服务器上
【Vue3】Vite打包发布错误若干问题解决方案，新手遇到的问题都在这里。
【敦厚的曹操】的专栏
02-22 7697
【Vue3】Vite打包发布错误若干问题解决方案，新手遇到的问题都在这里。
如何本地打开vue3+vite+ts项目打包的dist文件夹下index.html进行把玩
洋茄子炒鸡蛋的博客
08-10 6109
最近做一个vue3+vite3+ts的项目，配置了多入口页面，想不通过部署到服务器的方式在本地看一下打包后的效果。
vue3+vite项目构建
07-27
对于 Vue 3 + Vite 项目构建，你可以按照以下步骤进行操作： 1. 确保你的开发环境已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已安装 Node.js，并确保其版本大于等于 12.0.0。 2. 安装 Vue CLI，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值