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

在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端口)

相关推荐

  1. nginx部署vue项目

    2024-01-29 19:38:01       34 阅读
  2. 前端vue部署nginx多端口文件配置

    2024-01-29 19:38:01       34 阅读
  3. Ruoyi-Vue前端部署-nginx部署多个vue前端项目

    2024-01-29 19:38:01       12 阅读
  4. nginx部署前端项目总结

    2024-01-29 19:38:01       44 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-29 19:38:01       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-29 19:38:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-29 19:38:01       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-29 19:38:01       20 阅读

热门阅读

  1. C++循环嵌套和break语句

    2024-01-29 19:38:01       33 阅读
  2. BGP实验

    BGP实验

    2024-01-29 19:38:01      31 阅读
  3. 2024美赛数学建模E题思路+模型+代码+论文

    2024-01-29 19:38:01       30 阅读
  4. 【C语言】(7)输入输出

    2024-01-29 19:38:01       35 阅读
  5. 2024美赛数学建模C题思路+模型+代码+论文

    2024-01-29 19:38:01       33 阅读
  6. Midjourney图片生成描述词记录(今天一天)

    2024-01-29 19:38:01       31 阅读
  7. 随机生成UI不重叠

    2024-01-29 19:38:01       34 阅读
  8. vmware安装centos8-stream

    2024-01-29 19:38:01       38 阅读
  9. Groovy语言学习

    2024-01-29 19:38:01       31 阅读
  10. 蓝牙服务发现协议(SDP)

    2024-01-29 19:38:01       32 阅读
  11. linux 主机无法联网问题

    2024-01-29 19:38:01       29 阅读
  12. C语言——函数

    2024-01-29 19:38:01       30 阅读