使用nginx部署vue项目到服务器

使用nginx部署vue项目到服务器

1. 连接服务器

方法一:使用阿里云服务器

* 直接在阿里云上后台实例处选择远程连接即可

方法二:使用使用Xshell和xfpt连接

1. 官网下载这两个软件
2. 运行Xshell => 新建会话 => 会话名称自取 **主机填写自己的服务器的公网IP**
  ![](https://img2023.cnblogs.com/blog/2981099/202303/2981099-20230304170222482-471029056.png)

2.服务器安装nginx

2.1检查是否已经安装了nginx,运行下面命令检查

whereis nginx

  • nginx:
  • 此命令是检查nginx路径的,看到上述nginx后面没有路径,说明未安装
    nginx -v
  • nginx -v是检查nginx的版本的命令,也可以检查

2.2安装nginx

yum install -y nginx

3.启动nginx

运行启动命令

nginx
* 如果不在nginx目录下,可能要加上nginx路径,此时的命令变成:nignx路径/nignx,例如:usr/local/nginx/sbin/nginx
* 停止命令:
nginx -s stop
* 重启命令
nginx -s reload
* 启动后,在浏览器输入服务器IP即可看到nginx的默认页面信息

4.配置nginx

1.找到nginx的配置文件,运行下面的命令

whereis nginx

2.nginx.conf即为要配置的文件,打开该文件,命令

`vim 刚刚找到的nginx.conf的路径`

3.修改,输入 i 进入编辑模式

  • 可以选择修改端口,把端口修改为不被占用的端口即可
  • root处为网站的页面路径,要修改为需要部署的文件的路径,vue部署时,生成的是dist文件,这里就写成/home/www/dist

2,3步可以换成直接在nginx的conf.d目录下创建一个xxx.conf的文件,然后写:

server {
     listen 8080;
     server_name localhost;
     location / {
             root /usr/app/sunny;
             index index.html;
     }       
}       

即可

4.重启nginx

nginx -s reload

5.新建网页存放的文件夹

因为刚刚设置的网站存放路径是/home/www/dist,而/home是已经存在的文件夹,所以只要新建www文件夹即可,dist是vue构建时生成的文件夹,直接上传即可

  • 进入home目录
    cd /home
  • 新建www文件夹
    mkdir www

6.打包vue部署项目

1.在vue项目中,找到按下图修改

2.运行以下命令打包项目

npm run build

  • 可以看到生成了dist文件夹

3.上传dist文件夹到上述设置的目录,即/home/www下

  • Xshell中点击上述按钮,打开xftp,如下图,把本地的dist直接拖到服务器文件夹即可

7.打开浏览器,输入服务器ip+设置的端口即可访问

posted on   Alexmo  阅读(479)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示