Nginx部署前端项目尝试 - windows版

前端还是要学一点服务器端的东西,才能更好的理解一些知识

1、项目打包 生成dist
2、下载nginx解压,start nginx 启动

浏览器输入 localhost 显示如下页面表示启动成功

3、配置nginx
复制代码
	server {
        listen       8080;
        # ip 不要加http 前后不要加 /
        server_name  localhost;
		
		
        location / {    
            # 不知道为啥 data前面加/ 就报500
			root   data/dist;
			index  index.html index.htm;
            # history 路由模式要加如下代码
			try_files $uri $uri/ /index.html; 
        }
    }

我在nginx 目录下新建了 data 文件夹,dist放进此文件下 ./nginx -s reload 重启服务器

文件目录如下

访问地址效果如下:

相关推荐
前端粉刷匠2 分钟前
2025 年是 Agent 的,2026 年是 Harness 的——AI 编程 Harness 架构深度解析
前端·人工智能
张元清6 分钟前
React useSessionStorage Hook:刷新不丢、只属于当前标签页的状态 (2026)
前端·javascript·react.js
cindershade12 分钟前
为 TypeScript 项目建立可靠的类型边界:API 响应、表单与第三方库
前端
半仙er14 分钟前
第一周02天 原型与原型链
前端
半仙er15 分钟前
第一周04天Promise 深入与 async / await
前端
fail_to_code15 分钟前
从 Lighthouse 83 到 100:一次 Vue 项目的性能排查实录
前端·人工智能
用户693717500138421 分钟前
DeepSeek 调价正式生效:一夜涨 11 倍,靠低价薅羊毛的日子结束了
前端·人工智能·后端
半仙er27 分钟前
第一周01天:this 指向与 call / apply / bind
前端
小帅不太帅28 分钟前
给大家推荐一个特别好用的专为 AI Agent 打造的最快浏览器
前端·agent·浏览器
半仙er28 分钟前
第一周03天 事件循环与宏任务 / 微任务
前端