用Nginx在局域網發佈Vue項目

本文介紹怎麼使用Nginx在局域網發佈Vue項目，讓同事能夠看到你的項目，廢話很少說直接上乾貨，以爲有用點個贊，謝謝。

1、下載Nginx

打開Nginx官方下載地址，點擊Stable version下面的nginx/Windows下載。下載完成後解壓隨便放在哪一個角落。

2、配置服務

• 在文件夾中找到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;
      #charset koi8-r;
  
      #access_log logs/host.access.log main;
  
      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就能夠了。

3、讓同事訪問你的項目

很是簡單，讓你同事在系統hosts文件中新增你的IP地址 demo.com就能夠訪問了。