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

目录

一、前端应用打包

二、部署前端应用

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

nginx部署前端(vue)项目及配置修改_第1张图片

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

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

nginx部署前端(vue)项目及配置修改_第2张图片

修改完之后保存退出。

3、重启nginx

执行命令

nginx -s reload

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

./nginx -s reload

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

三、查看效果

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

nginx部署前端(vue)项目及配置修改_第3张图片

你可能感兴趣的:(操作记录,前端,运维,linux)