nginx部署前端(vue)项目及配置修改

本文详细介绍了如何使用npm打包前端应用,然后将打包后的dist文件上传至服务器并配置Nginx,包括修改配置文件、指定文件夹路径和重启服务,最后演示如何查看部署效果。
摘要由CSDN通过智能技术生成

目录

一、前端应用打包

二、部署前端应用

1、上传前端文件夹

2、修改nginx配置文件

3、重启nginx

三、查看效果


nginx安装参考:linux安装nginx-CSDN博客

一、前端应用打包

打包命令

npm run build

打包成功如下,会在项目路径下生成dist文件夹

二、部署前端应用

1、上传前端文件夹

第一步打包生成的dist文件夹放置服务器上,这个目录可自定义,只需要在nginx中配置正确就可以。

以路径//usr/local/project/front 为例,将dist文件夹放到此路径下

2、修改nginx配置文件

进入nginx安装目录 /usr/local/nginx,配置文件是conf文件夹下的nginx.conf

在http -- server -- location 层级下修改root节点为上面上传的前端文件夹的路径

端口为默认的80,可以不修改,也可以修改。

修改完之后保存退出。

3、重启nginx

执行命令

nginx -s reload

如果显示command not found命令找不到,可以进入nginx安装路径/usr/local/nginx/sbin(根据自己的安装路径来)路径下执行

./nginx -s reload

也可以修改commond not found 的报错,那就是配置下自己环境变量即可。

三、查看效果

浏览器输入ip地址(如果修改了nginx的默认端口,记得加上端口,不加默认就是80端口)

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值