Nginx部署Vue项目 -- 在window / 远程Linux的部署

NGINX部署Vue项目

主要内容

• window中部署
  • window安装nginx
  • 将项目进行打包部署
• 远程Linux部署
  • centos上安装nginx
  • 上传打包项目部署

一、window上使用nginx

1.Window下载nginx

• 官方网站:https://nginx.org/

• 其中包含很多的nginx版本，大致可以分成三类:

  • Mainline version:Mainline 是Nginx目前主力在做的版本，可以说是开发版
  • Stable version:最新稳定版，生产环境上建议使用的版本
  • Legacy versions:遗留的老版本的稳定版

• 不用多说我们选择Stable Version的最新版本.

• 进入下载页面，选择windows的版本
  

2.Windows安装nginx

• 下载并且解压到某个文件夹

  • 注意: 解压到的文件夹中不能包含中文否则不能正常启动
    

  • 双击启动接口

  • 在浏览器中输入localhost，看到下面的页面说明安装成功了
    
    

3.将项目进行打包部署

方式一：直接复制粘贴到html文件夹

• 将Vue项目npm run build打包后的dist文件夹里面的东西复制到Nginx的html下(记得把Nginx原来的html删除先)
  
  
• 重新刷新localhost，会发现项目已经部署完成
  

方式二：改配置

• 将项目打包
• 将项目拷贝到nginx目录
  
• 修改配置文件
  
  
  
• 修改配置，需要重启Nginx
  • 在Nginx所在目录的cmd下，使用命令nginx -s reload
  • 如果重启不成功，用下面的解决方案
    

二、远程Linux部署

1.Centos上安装nginx

• 可以用winscp远程连接主机

2.上传打包项目部署