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

文件目录如下

访问地址效果如下:

相关推荐
Ulyanov1 分钟前
基于Impress.js的3D概念地图设计与实现
开发语言·前端·javascript·3d·ecmascript
jiayong232 分钟前
Vue 3 面试题 - TypeScript 与工程化
前端·vue.js·typescript
小白菜学前端6 分钟前
Git 推送 Vue 项目到远程仓库完整流程
前端·git
A南方故人6 分钟前
一个用于实时检测 web 应用更新的 JavaScript 库
开发语言·前端·javascript
悟能不能悟7 分钟前
postman怎么获取上一个接口执行完后的参数
前端·javascript·postman
小程故事多_808 分钟前
穿透 AI 智能面纱:三大高危漏洞(RCE/SSRF/XSS)的攻防博弈与全生命周期防护
前端·人工智能·aigc·xss
koiy.cc10 分钟前
新建 vue3 项目
前端·vue.js
虹科网络安全12 分钟前
艾体宝新闻 | NPM 生态系统陷入困境:自我传播恶意软件在大规模供应链攻击中感染了 187 个软件包
前端·npm·node.js
qq_124987075331 分钟前
基于springboot+vue的家乡特色旅游宣传推荐系统(源码+论文+部署+安装)
java·前端·vue.js·spring boot·毕业设计·计算机毕设·计算机毕业设计
pas13632 分钟前
38-mini-vue 实现解析 element
前端·javascript·vue.js