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 重启服务器

文件目录如下

访问地址效果如下:

相关推荐
朱昆鹏7 分钟前
开源 Claude Code + Codex + 面板 的未来vibecoding平台
前端·后端·github
lyrieek12 分钟前
pgadmin的导出图实现,还在搞先美容后拍照再恢复?
前端
永远是我的最爱17 分钟前
基于.NET的小小便利店前台收银系统
前端·sqlserver·.net·visual studio
从文处安18 分钟前
「九九八十一难」第一难:前端数据mock指南(TS + VUE)
前端
Zhencode38 分钟前
Vue3 响应式依赖收集与更新之effect
前端·vue.js
x-cmd42 分钟前
[x-cmd] jsoup 1.22.1 版本发布,引入 re2j 引擎,让 HTML 解析更安全高效
前端·安全·html·x-cmd·jsoup
天下代码客1 小时前
使用electronc框架调用dll动态链接库流程和避坑
前端·javascript·vue.js·electron·node.js
weixin199701080161 小时前
【性能提升300%】仿1688首页的Webpack优化全记录
前端·webpack·node.js
冰暮流星2 小时前
javascript之数组
java·前端·javascript
晚霞的不甘2 小时前
Flutter for OpenHarmony天气卡片应用:用枚举与动画打造沉浸式多城市天气浏览体验
前端·flutter·云原生·前端框架