前端打包后服务器配置Nginx遇到的问题

已于 2024-05-23 16:56:29 修改
阅读量225 收藏
点赞数 3
文章标签： 前端 服务器 nginx
于 2024-05-23 16:54:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40474392/article/details/139151951
版权

前端打包后配置Nginx遇到的问题

自定义添加一级路由

  • 此时前端代码打包 VITE_BASE_URL = /skylimmxpt/
  • location 后 /skylimmxpt 为 root路径+location路径 为 查找 index.html
  • D:\mxpt_project\ 文件路径 Try_files 后边的/skylimmxpt/ 前端history 路由报错问题解决
  • 最终访问地址为IP:port/skylimmxpt/
    在这里插入图片描述

默认无一级路由地址，直接ip+端口

  • 此时前端代码打包 VITE_BASE_URL = /
  • 最终访问地址为IP:port
    在这里插入图片描述
Y头-前端
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
项目打包运行dist以及nginx配置
04-11
项目打包运行dist以及nginx配置
ThingsBoard 拆分前后端
东方势力的博客
04-20 1340
(1)进入ThingsBoard 将ui-ngx 剪切至另一个文件夹单独运行，删除ui-ngx中的多余配置，例如pom.xml (2) 全局搜索ui-ngx 关键字，删除或注释掉相关配置 XXX\thingsboard\application\pom.xml 文件中的ui-ngx注释知道 1： 2： 3： 然后单独运行： yarn start :运行成功 然后启动后台代码：就可以了。 感谢下面人的分享： 我参考了：6-ThingsBoard 拆分前后端 - 简书(1...
thingsboard前端缓存--nginx
weixin_50153914的博客
12-29 1502
thingsboard部署到阿里云服务器之后，由于登录界面要发送的文件很大，并且服务器的带宽目前有限，因此配置一个nginx，进行前端页面的一些缓存，参考了https://qianchenzhumeng.github.io/posts/Nginx%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86thingsboard%E5%B9%B6%E7%BC%93%E5%AD%98%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6/这篇文章，特此表明。
nginx 部署vue3项目 页面404
sinat_37012541的博客
04-30 2423
vue3 vite 部署到nginx 刷新404 500等问题处理
vue前端项目部署之nginx配置.md
03-20
在确保Nginx配置无误之后，接下来需要对前端项目进行构建与打包。对于基于Vue.js的项目，推荐使用npm脚本来执行打包操作。 1. **进入项目根目录**：使用`cd`命令切换到项目所在目录。 2. **执行打包命令**：在终端...
Vuejs+vue-router打包+Nginx配置的实例
10-17
配置完成后，使用`nginx -t`检查配置文件的正确性，无误后通过`nginx -s reload`重启Nginx服务。现在，访问服务器地址（如`cloudserverhost:3000`）和二级路径，应该能正常展示页面，且刷新不会导致404错误。 总结...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...
vue打包部署nginx 配置
01-24
在IT行业中，前端开发人员经常会遇到将Vue.js项目打包并部署到服务器的问题。在这个过程中，Nginx作为一款高性能的Web服务器和反向代理服务器，常被用来处理静态资源和分发请求。本文将深入探讨“Vue打包部署Nginx...
【js】各类前端输入校验方法
galaxyJING的博客
08-21 353
【代码】【js】各类前端输入校验方法。
浅谈JavaScript 框架在现代 Web 开发中的作用
08-21 520
随着近年来 Web 开发的快速发展，JavaScript 框架已成为用于构建任何应用程序的强大、灵活和可扩展元素的重要实用程序。一些框架，如Angular、React、Vue.JS等，有助于以系统的方式处理固有的网站开发复杂性，以提高效率。它们提供已经为基本编程功能和常规任务编写的 JavaScript 代码，从而缩短了必要的原始编码时间。此外，它们还增加了 Web 应用程序的功能和交互性，从...
【IC前端虚拟项目】用例的完善与补充
moon9999的博客
08-20 95
当然只不过是参考，个人不建议在寄存器测试这个环节投入太多的经历，也没有必要非在环境中讲寄存器模型以seq方式呈现，只要用起来方便就是最合适的。如果之后在实际的项目中寄存器模型时通过seq的方式集成到环境中的（比如我现在负责的项目，验证环境就是如此），那么转换过来也是没有什么难度的，这点大可放心。此外，在组织更多随机用例的过程中可以练习多种不同约束的transaction以不同的比例关系通过同一个seq/sqr uvm_do的操作。好了，具体的用例大家可以参考我的代码，尽量以自己的思路来进行扩充。
前端宝典十六：深入浅出8大设计模式
franktaoge的博客
08-24 662
本文主要探讨前端开发中的各种设计模式，主要分类有： - 单例模式 - 建造者模式 - 代理模式 - 装饰器模式 - 适配器模式 - 策略模式 - 观察者模式 - 发布订阅模式 通过对他们实际开发中的使用场景的解析，深入浅出的一起更全面直观的进行学习：
iOS WebView
m0_61227789的博客
08-21 652
在iOS开发中，WebView 是一个用于显示网页内容的控件。它允许你在应用程序中嵌入一个浏览器窗口，以便加载和显示网页。iOS 提供了两种主要的 WebView 类：UIWebView 和 WKWebView。其中，WKWebView 是较新的、更强大的选项，推荐在新项目中使用。
Android中webview优化策略
zys563488512的博客
08-21 279
在Android开发中，要实现WebView的秒开体验，可以通过一系列性能优化策略来显著提升WebView的加载速度和用户体验。
前端审查_Nginx
阿宝的博客
08-22 330
vueCli/vite/cra/umi等都是运行 build脚本build如何定义 打包生产环境代码配置在配置文件 vue.config.js中。
前端：篮球投掷动画
懒羊羊大王的博客
08-23 501
使用 H5 和 CSS3 实现的一个篮球投掷动画。 玩法：通过点击篮球所在的绿色(紫色)容器，实现篮球的投掷和回收。
前端点击预览图片：Viewer.js 使用方法
mq1314520_zhl的博客
08-21 742
Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能，同时，这款优秀的插件配置操作起来也非常的方便。Viewer.js分为2个版本，js版本和jquery版本，下载地址分别为jQuery 版本：GitHub - fengyuanchen/jquery-viewer: A jQuery plugin wrapper for Viewer.js.
WebRTC 实时通信：构建高效网页视频通话的秘诀
最新发布
liuxin33445566的博客
08-24 232
WebRTC 是一个开源项目，由Google于2010年启动，旨在通过简单的API实现浏览器间的实时音视频通信。它允许开发者在网页应用中轻松集成音视频通话、文件共享、屏幕共享等功能。
Web客户端软件测试
m0_64998406的博客
08-21 664
软件中存在的任何问题，也叫缺陷（ bug ）。
将前端vue项目部署到nginx服务器
06-06
将前端 Vue 项目部署到 Nginx 服务器，可以按照以下步骤进行： 1. 构建项目：在本地开发环境中，进入 Vue 项目的根目录，执行以下命令进行构建： ``` npm run build ``` 这个命令会在项目的 `dist` 目录下生成一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值