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

文件目录如下

访问地址效果如下:

相关推荐
Liu.7743 分钟前
vue使用lodop控件打印
前端·javascript·vue.js
OpenTiny社区10 分钟前
TinySearchBox 综合搜索组件重磅更新:实现 Vue 2 和 Vue 3 双版本适配!
前端·javascript·vue.js
bluechips·zhao11 分钟前
中间件及框架漏洞详解(Nginx、Apache、Tomcat、Redis、Zookeeper、RabbitMQ、Kafka等)
nginx·web安全·网络安全·中间件·apache·网络攻击模型·java-rabbitmq
GDAL17 分钟前
HTML 实现登录状态记录 深入全面讲解教程
前端·html·登录验证
(づど)18 分钟前
一套齐全的环境设置:nvm\node\nrm\pnpm
前端·笔记
晷龙烬21 分钟前
Vue 3 自定义指令:从“瑞士军刀”到“专属工具” !
前端·javascript·vue.js
MediaTea23 分钟前
思考与练习(第四章 程序组成与输入输出)
java·linux·服务器·前端·javascript
BD_Marathon25 分钟前
【JavaWeb】NPM_简介和相关配置
前端·npm·node.js
咸鱼加辣28 分钟前
【前端框架】react
前端·react.js·前端框架
unicrom_深圳市由你创科技28 分钟前
Vue 3 高效开发技巧总结
前端·javascript·vue.js