使用nginx部署vue项目到服务器
使用nginx部署vue项目到服务器
1. 连接服务器
方法一:使用阿里云服务器
* 直接在阿里云上后台实例处选择远程连接即可
方法二:使用使用Xshell和xfpt连接
1. 官网下载这两个软件
2. 运行Xshell => 新建会话 => 会话名称自取 **主机填写自己的服务器的公网IP**

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直接拖到服务器文件夹即可
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!