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

文件目录如下

访问地址效果如下:

相关推荐
前端伪大叔6 分钟前
freqtrade智能挂单策略,让你的资金利用率提升 50%+
前端·javascript·后端
江城开朗的豌豆7 分钟前
从“any”战士到类型高手:我的TypeScript进阶心得
前端·javascript·前端框架
红尘散仙27 分钟前
TRNovel王者归来:让小说阅读"声"临其境的终端神器
前端·rust·ui kit
知花实央l31 分钟前
【Web应用安全】SQLmap实战DVWA SQL注入(从环境搭建到爆库,完整步骤+命令解读)
前端·经验分享·sql·学习·安全·1024程序员节
烛阴35 分钟前
为你的Lua代码穿上盔甲:精通错误处理的艺术
前端·lua
专注前端30年1 小时前
Vue CLI与Webpack:区别解析与实战使用指南
前端·vue.js·webpack
余道各努力,千里自同风1 小时前
如何使用 Promise.all() 处理异步并发操作?
开发语言·前端·javascript
营赢盈英1 小时前
How to detect if <html> tag has a class in child Angular component
前端·javascript·css·html·angular.js
Achieve - 前端实验室1 小时前
深入浅出 ES Module
前端·javascript
littleplayer1 小时前
Combine 基本使用指南
前端