『前端工程』—— 用Nginx在局域网发布Vue项目

本文介绍怎么使用Nginx在局域网发布Vue项目，让同事可以看到你的项目，废话不多说直接上干货，觉得有用点个赞，谢谢。

一、下载Nginx

打开Nginx官方下载地址，点击Stable version下面的nginx/Windows下载。下载完成后解压随便放在哪个角落。

二、配置服务

• 在文件夹中找到conf文件夹，在其中新建vhost文件。

• 修改conf/nginx.conf文件中内容

  在最后新增两行代码

      include vhost/*.conf;//引入vhost中的*.conf文件内容
      server_names_hash_bucket_size 64;//配置多域名时候要增加hash表的大小
  }
  

• 在conf/vhost文件夹中新建demo.conf文件。

• 找一个Vue项目，运行npm run build,在项目根目录下生产dist文件。

• 配置项目服务

  在demo.conf文件中写入

  server {
      listen 80;
      server_name  demo.com;
      root D:\project\demo\dist;
      index index.html;
      location / {
          try_files $uri $uri/ @router;
          index index.html;
      }
      location @router {
          rewrite ^.*$ /index.html last;
      }
  }
  

  • listen项表示 要监听服务的端口，默认任何网址的端口都是8080。
  • server_name项表示 服务名称（域名名称）。
  • root项表示 Vue项目打包编译后生成dist文件的地址。
  • index项表示 访问的首页。
  • 如果是在history模式下，要额外配置以下内容，否则刷新会出现404错误。
    • 匹配任何地址尝试搜索地址上相对应的文件如果找不到则都对应到index.html文件上，其中index.html就是dist文件中.html文件的文件名。

• 最后在系统hosts文件中新增127.0.0.1 demo.com

• 这时候你可以不使用npm run dev来启动项目来访问了，直接访问demo.com就可以了。

三、让同事访问你的项目

非常简单，让你同事在系统hosts文件中新增你的IP地址 demo.com就可以访问了。