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

文件目录如下

访问地址效果如下:

相关推荐
J***Q2925 小时前
Vue数据可视化
前端·vue.js·信息可视化
记得记得就1516 小时前
【Nginx 性能优化与防盗链】
运维·nginx·性能优化
ttod_qzstudio6 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
_大龄6 小时前
前端解析excel
前端·excel
一叶茶7 小时前
移动端平板打开的三种模式。
前端·javascript
前端大卫7 小时前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端
Want5957 小时前
HTML音乐圣诞树
前端·html
老前端的功夫8 小时前
前端浏览器缓存深度解析:从网络请求到极致性能优化
前端·javascript·网络·缓存·性能优化
Running_slave8 小时前
你应该了解的TCP滑窗
前端·网络协议·tcp/ip