uni-app打包h5并部署到nginx,路由模式history

uni-app打包有些坑,當時運行的基礎路徑填寫了./,導致在二級頁面刷新之后,頁面直接空白。就只能換一個路徑了,nginx也要跟著改,下面是具體步驟。

manifest.json配置web

運行路徑寫/h5/,或者寫你們網站的目錄,比如我這里寫了h5,到時候訪問的地址就是127.0.0.1/h5,對,帶了一個h5
在這里插入圖片描述

nginx配置

需要在nginx里面配置一個/h5配置,然后我這里還配置了一個location /的,讓他重定向到/h5,這樣用戶輸入127.0.0.1的時候會重定向127.0.0.1/h5,這個可以按需添加。

server {listen 80;server_name localhost;# 重定向根路徑 / 到 /h5location / {return 301 /h5;}# 訪問/h5的配置location /h5 {root html/webH5;index index.html index.htm;try_files $uri $uri/ /h5/index.html;}# 訪問后臺接口的配置location /web/server/ {proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://localhost:8080/web/server/;}error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}}

打包成網站

把打包之后的文件,丟到nginx里面的\html\webH5\h5目錄下面,如果你的文件不是放到這個地方的,那就改一下nginx的root html/webH5;配置,改成你自己的目錄
在這里插入圖片描述

在這里插入圖片描述

打包之后請求后臺地址想用相對地址的話,可以參考uni-app打包成H5使用相對路徑

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/73424.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/73424.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/73424.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Ceph(1):分布式存儲技術簡介

1 分布式存儲技術簡介 1.1 分布式存儲系統的特性 (1)可擴展 分布式存儲系統可以擴展到幾百臺甚至幾千臺的集群規模,而且隨著集群規模的增長,系統整體性能表現為線性增長。分布式存儲的水平擴展有以下幾個特性: 節點…

Linux驅動開發實戰(五):Qt應用程序點RGB燈(保姆級快速入門!)

Linux驅動開發實戰(五):Qt應用程序點RGB燈(保姆級快速入門!) 文章目錄 Linux驅動開發實戰(五):Qt應用程序點RGB燈(保姆級快速入門!)前…

Docker安裝Kafka(內含zookeeper)

因為kafka是基于zookeeper做的,所以必須要有zookeeper 一、Zookeeper 1.拉取鏡像 docker pull zookeeper:3.7.02.運行 docker run --restartalways \--log-driver json-file \--log-opt max-size100m \--log-opt max-file2 \--name zookeeper -p 2181:2181 \-v…

芯谷D8563TS實時時鐘/日歷芯片詳解可替代PCF8563

概述 芯谷D8563TS是一款低功耗CMOS實時時鐘/日歷芯片,廣泛應用于移動電話、便攜式儀器、傳真機和電池供電產品等領域。該芯片通過兩線雙向IC總線進行數據傳輸,最大總線速度為400 kbits/s。D8563TS內置了自動遞增的字地址寄存器,支持多種功能…

【一次成功】Win10本地化單機部署k8s v1.31.2版本及可視化看板

【一次成功】Win10本地化單機部署k8s v1.31.2版本及可視化看板 零、安裝清單一、安裝Docker Desktop軟件1.1 安裝前<啟用或關閉Windows功能> 中的描紅的三項1.2 查看軟件版本1.3 配置Docker鏡像 二、更新裝Docker Desktop三、安裝 k8s3.1 點擊啟動安裝3.2 查看狀態3.3 查…

MoonSharp 文檔五

目錄 13.Coroutines&#xff08;協程&#xff09; Lua中的協程 從CLR代碼中的協程 從CLR代碼中的協程作為CLR迭代器 注意事項 搶占式協程 14.Hardwire descriptors&#xff08;硬編碼描述符&#xff09; 為什么需要“硬編碼” 什么是“硬編碼” 如何進行硬編碼 硬編…

【初級篇】如何使用DeepSeek和Dify構建高效的企業級智能客服系統

在當今數字化時代,企業面臨著日益增長的客戶服務需求。使用Dify創建智能客服不僅能夠提升客戶體驗,還能顯著提高企業的運營效率。關于DIfy的安裝部署,大家可以參考之前的文章: 【入門級篇】Dify安裝+DeepSeek模型配置保姆級教程_mindie dify deepseek-CSDN博客 AI智能客服…

【網絡編程】HTTP網絡編程

13.1 HTTP 簡介 HTTP(Hyper Text Transfer Protocol,超文本傳輸協議)是用于從萬維網(WWW:World Wide Web) 服務器(簡稱Web 服務器)傳輸超文本到本地瀏覽器的傳送協議&#xff0c;基于TCP/IP 通信協 議來傳遞數據 (HTML 文件、圖片文件、查詢結果等)。 13.2 HTTP 的工作原理 …

用Scrum敏捷的視角看《哪吒2》的創作

去年我們公司邀請Scrum中文網的老師培訓了敏捷開發課程&#xff0c;讓我對敏捷有了更深入的理解。前陣子我參加了scrum中文網的一個直播&#xff0c;老師分享了敏捷在個人領域或生活其他領域的應用&#xff0c;很有意思。因為我學習敏捷&#xff0c;除了應用到本身軟件研發的工…

Docker+Flask 實戰:打造高并發微服務架構

DockerFlask 實戰&#xff1a;打造高并發微服務架構 今天我們要深入探討一個非常熱門且實用的主題&#xff1a;基于 Docker 部署 Python Flask 應用。Docker 作為當下最流行的容器化技術&#xff0c;已經廣泛應用于各種開發和部署場景&#xff0c;尤其是在微服務架構中。而 Fl…

Linux find 命令完全指南

find 是 Linux 系統最強大的文件搜索工具&#xff0c;支持 嵌套遍歷、條件篩選、執行動作。以下通過場景分類解析核心用法&#xff0c;涵蓋高效搜索、文件管理及高級技巧&#xff1a; 一、基礎搜索模式 1. 按文件名搜索&#xff08;精確/模糊匹配&#xff09; <BASH> f…

【量化策略】趨勢跟蹤策略

【量化策略】趨勢跟蹤策略 &#x1f680;量化軟件開通 &#x1f680;量化實戰教程 技術背景與應用場景 在金融市場中&#xff0c;趨勢跟蹤策略是一種基于市場趨勢進行交易的量化投資方法。該策略的核心思想是“順勢而為”&#xff0c;即認為市場價格會沿著一定的方向持續移…

AI自動化、資本短視、三輸與破局

當前AI應用中的一個深層矛盾&#xff1a;工程師使用AI將很專業的任務變成小白可以操作的工作&#xff0c;然后資本方給小白很少的錢把工程師裁掉了&#xff0c;然而小白不懂底層&#xff0c;出問題幾乎無法修復。由此&#xff0c;技術普及與專業能力之間的斷層引發了"三輸…

Python數據分析之數據可視化

Python 數據分析重點知識點 本系列不同其他的知識點講解&#xff0c;力求通過例子讓新同學學習用法&#xff0c;幫助老同學快速回憶知識點 可視化系列&#xff1a; Python基礎數據分析工具數據處理與分析數據可視化機器學習基礎 四、數據可視化 圖表類型與選擇 根據數據特…

簡述計算機網絡中的七層模型和四層模型

在計算機網絡中&#xff0c;網絡協議棧的設計通常采用分層結構來處理不同的通信任務。常見的分層結構有OSI七層模型和TCP/IP四層模型。雖然它們的層次數量不同&#xff0c;但本質上都在解決如何有效地進行計算機間通信。本文將分別介紹這兩種結構的功能和各層的協議。 一、OSI七…

2025高頻面試算法總結篇【持續更新中】

文章目錄 遞歸&回溯131. 分割回文串面試題 08.12. 八皇后 動態規劃72編輯距離5. 最長回文子串279. 完全平方數300. 最長遞增子序列 遞歸&回溯 131. 分割回文串 回溯思路&#xff1a; 臨界條件&#xff1a; if (start s.length) > 保存 循環遍歷這個字串 for (int…

【大模型學習】第二十二章 什么是對抗生成網絡

目錄 一、背景介紹 二、生活化例子說明什么是對抗生成網絡 三、技術細節詳解 &#xff08;一&#xff09;基本概念 &#xff08;二&#xff09;訓練機制 &#xff08;三&#xff09;損失函數 一、背景介紹 對抗生成網絡&#xff08;Generative Adversarial Networks, GANs…

攝像頭模塊ISP處理流程

攝像頭模塊的ISP&#xff08;圖像信號處理器&#xff09;處理流程是對圖像傳感器輸出的原始信號進行系統性優化的過程&#xff0c;主要分為以下關鍵步驟及對應功能模塊&#xff1a; 一、原始信號輸入與預處理 ?傳感器信號捕獲? CMOS/CCD傳感器將光信號轉換為模擬電信號&…

linux系統安裝和激活conda

安裝 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.shbash ./Miniconda3-latest-Linux-x86_64.sh回車到最后按照輸入yes&#xff0c;之后按提示操作。 激活 conda activate如果沒有反應或者返回&#xff1a; bash: conda: command not found則…

(全)2024下半年真題 系統架構設計師 綜合知識 答案解析02

系統架構設計師第二版教程VIP課程https://edu.csdn.net/course/detail/40283 面向對象技術 在UML用例圖中&#xff0c;參與者之間存在 關系。 A. 聚合 B. 包含 C. 繼承 D. 擴展 答案&#xff1a;C 解析&#xff1a;用例圖描述了一組用例、參與者以及它們之間的關系…