使用nginx将自己的vue项目部署到服务器上第一步:下载安装nginx 官网: http://nginx.org/e

一、安装并部署项目

第一步:下载安装 nginx 官网: nginx.org/en/
第二步:将自己的 vue 项目打包为 dist 文件夹;
第三步:解压下载的 nginx 文件夹,使用 cmd 进入到 nginx 文件夹下,使用指令 start nginx 启动 nginx 服务器;
第四步:浏览器输入 localhost:80,查看 nginx 是否启动;
第五步:进入 nginx/html 文件夹下,删除 50.html 和 index.html 文件,将 vue 项目打包玩的 dist 文件夹下的所有文件复制到 nginx/html 文件夹下;
第六步:刷新浏览器,项目启动成功;

二、同一个nginx部署多个项目

1.在同一域名(ip)下监听不同端口,启动不同项目;

第一步:将不同的项目打包 dist，打包路径默认为'/'，需要修改为'/app1/'、'/app2/'
第二步:将打包后的文件移到 nginx/html 文件夹下，放置在 app1、app2 文件夹下;
第三步:打开 nginx/conf/nginx.conf 文件, 找到

server {
    listen      8001;
    #   监听的端口号;
    server_name  localhost;
    #  服务器地址:可以使ip,对应hosts文件

    location ^~/app1/ {
    #   指定项目所在路径
        root   html/;
        #    指定项目入口文件,一般默认index.html
        index  index.html index.htm;
    }

    #  配置反向代理,解决跨域问题
    location /api/ {
        proxy_pass http://172.0.0.1:8000;
    }

}
server {
    listen      8002;
    #   监听的端口号;
    server_name  localhost;
    #  服务器地址:可以使ip,对应hosts文件

    location ^~/app2/ {
    #   指定项目所在路径
        root   html/;
        #    指定项目入口文件,一般默认index.html
        index  index.html index.htm;
    }

    #  配置反向代理,解决跨域问题
    location /api/ {
        proxy_pass http://172.0.0.1:8000;
    }

}

需要几个项目复制几个,修改为对应的项目名称

第四步: nginx -s reload 重载 nginx 配置文件,重启 nginx nginx -s stop 停止 nginx,

如果报错 nginx: command not found 则使用./nginx -s xxx

2.监听同一端口,不同路径部署多个项目

将 vue 项目配置文件下的 publicPath 修改为: '/项目名称/'

// vue.config.js
module.exports = {
  publicPath: `/app1/`, // 打包后的文件路径
  outputDir: `dist/app1` // 打包文件放置在dist文件夹下的app1文件夹
}

配置 nginx.conf 文件,路径同上

server {
      listen      8001;
     #   监听的端口号;
      server_name  localhost;
     #  服务器地址:可以使ip,对应hosts文件
     root  html;   #文件根路径

     #  第一个项目app1
     location ^~/app1/ {
         try_files $uri  $uri/ /app1/index.html;
          #访问根路径下的app1/index.html入口文件
     }

     # 第二个项目app2
     location ^~/app2/ {
         try_files $uri $uri/ /app2/index.html;
          #访问根路径下的app2/index.html入口文件

     }

    location /api1{
            proxy_pass http://172.xx.xx.xx:8001;
    }
    location /api2 {
            proxy_pass http://172.xx.xx.xx:8002;
    }

  }

其他操作同上

nginx配置gzip开启请求压缩

http {
    # 启用压缩
    gzip  on;
    # 配置需要返回压缩文件的类型，只有请求头中content-type包换如下配置，才会使用gzip压缩
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    server {...}