nginx部署vue前端項目實操(node安裝，及安裝vue-cli/vue腳手架)

node，npm，cnpm，vue-cli安裝，打包等操作
1.安裝node，下一步，默認配置，不需要改動什么東西，唯一注意的是安裝路徑不能有中文名稱
2.安裝完畢之后，先輸入cmd，查看node版本，及npm版本，node安裝的時候把npm一起安裝了，輸入node -v ，npm -v。查看到對應版本號沒問題即可

3.由於npm鏡像是國外的，下載東西較慢，所以我們需要國內淘寶鏡像cnpm 來替換npm，這是國內鏡像，安裝打包較快npm install -g cnpm --registry=https://registry.npm.taobao.org 后面的網站地址就是淘寶鏡像
4.安裝完node，npm及cnpm，並且查看版本無異常，可以安裝vue腳手架，命令為：npm install -g @vue/cli，腳手架可以理解為一個工具，幫你構建項目基礎模型，可以理解為vs創建webapi項目


5.由於我們已經安裝了cnpm，安裝了也不可能不用，因為cnpm更快，所以以后涉及npm指令的可以都替換成cnpm，例如:npm install -g @vue/cli替換為cnpm install -g @vue/cli
這一步是安裝腳手架，可以理解為安裝dotnet sdk
6.

如圖所示，出現vue cli版本號，即代表我們的vue腳手架安裝成功，接下來，可以構建項目了，通過命令vue create runoob-vue3-app構建我們的第一個vue項目
（注意，為了避免不必要的麻煩，請不要用文件路徑中帶空格的，和有中文名稱的路徑）
7.接下來創建一個空文件夾保存我們的項目，選中當前路徑，輸入cmd，打開當前路徑，輸入命令vue create vue3-app創建項目（vue-app是項目名稱）

8.注意點:打開我們的項目名稱的下一級路徑，這里放着我們的項目文件，（這里是為了不避免的vscode插件不能用的問題，打開其他路徑會造成你插件失效問題）

9.vscode會詢問你是否信任當前文件夾，點是，點否的話可能一些指令用不了，如果點是也用不了，建議直接以管理員方式啟動vscode，如果這樣命令也用不了，那就可以檢查一下環境變量了
一般情況下，node下載安裝之后會幫你添加環境變量的，
打開當前終端，我們此時需要啟動項目，啟動項目的命令是vue run serve，啟動之前先得生成項目依賴，項目依賴你可以理解為還原nuget包，生成項目依賴的命令是npm install
所以我們先輸入npm install ，生成完依賴之后，再啟動項目
10.cnpm識別不到命令。你這時候需要搜一下解決方案，這個解決方案我先試一下，行的話，我就鏈接貼上來
解決方案


生成依賴成功
11.
這里按住ctrl 鼠標點一下就能打開生成的項目界面了，這是啟動項目的命令 cnpm run serve
以上就是我們的安裝node，及安裝腳手架，安裝cnpm配置淘寶鏡像源，安裝vue腳手架，通過vue腳手架生成項目的相關操作
下面我們來學習通過npm命令打包我們的vue項目，打包可以理解為dotnet項目的發布，前端稱為打包，


項目文件夾下新生成了一個dist文件夾，這里存放着我們的打包文件，就和dotnet的publish文件一樣的作用

nginx如何部署vue項目

1.昨天已經把項目文件打包好了，存在dist文件夾中，我們先來看看文件夾中有哪些內容
2.打開dist文件夾，可以看到有兩個文件夾，分別是js及css，還有ico圖標及主頁面文件index.html,js和css是vue打包之后生成的js與css，就是我們項目中的js和css文件，都存在這里
為了防止項目暴露，vue幫我們做了guid文件名稱生成的東西，所以我們根本找不到我們的項目文件，這可以理解嗎
3.打開寶塔程序，在外網環境下打開我們的寶塔界面
4.打開寶塔面板的軟件商店，已安裝程序，打開nginx的設置
5.nginx的配置詳解

點擊查看代碼

worker_processes auto;
worker_rlimit_nofile 51200;
events
{
	worker_connections 51200;
	multi_accept on;
}
http {
		include       mime.types;
		#include luawaf.conf;
		include proxy.conf;
        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
		limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }
		location /nginx_status {  
        	allow 127.0.0.1;
            deny all;
            stub_status on;  
            access_log  off;  
        }  
    }
    # server{} 包含在http{}內部，    
    # 每一個server{}都是一個虛擬主機（站點） 
    # 意思是每一個server都會監聽服務器上的一個端口號，
    # 可以開設你想要部署的服務，如vue，node，python項目等

    # #是nginx中的注釋，同linux一樣
    server {
    # listen代表你所監聽的端口號，
    # 服務器中的端口號通過安全組開啟
    #（每一個雲服務器，其實也是一台虛擬機，
    # 安全組是架設在你虛擬機的防火牆外面做的一層保護措施，
    # 配置安全組規則時，它會自動為你打開你的端口，
    # 學過docker這里就好理解了，就是做了一層映射，比如，你的宿主機的端口是8080，安全組開啟的端口也是8080，做了一次轉換 ）
    
    # 這里理解不了沒關系，這里騷哥會講的，我個人是這么理解的
    # 虛擬機中的端口號需通過指令開啟，並且得關閉防火牆，你的windows系統中 才能訪問你當前的虛擬機的端口中的項目
    # linux與windows指令略有不同，
    # 不同的linux系統中的指令也略有差別
    listen       5100;

    # server_name 這里指的是你服務器的ip地址，
    # 本地部署的時候，可以寫為localhost，或者127.0.0.1，當然服務器也可以寫localhost
    # 它會幫你匹配你當前的內外網ip地址，這個我自己試過，沒問題，
    # _代表本機地址，和localhost一個意思
    # vscode的；顯示的有問題，分號是必須寫的，就和dotnet里的分號代表的意思一樣，都是結束的意思
    server_name  _;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    # location塊指定/與來自請求的url相比較的前綴“”，對於匹配請求，url將被添加到根指令中指定的路徑，
    # 即為了 ‘C:\Users\Administrator\Desktop\dist’在本地系統上形成請求文件的路徑，如果有幾個匹配的location塊，
    # （其中linux與windows的root根文件路徑書寫不一致，linux按照平時的寫法一般是：\Users\Administrator\Desktop\dist
    # windows的是 ‘\Users\Administrator\Desktop\dist’）
    # nginx會選擇最長前綴的塊，說明塊越長，越先開始匹配
    # location上面的塊提供了最短的前綴，長度為1，所以只有當所有其他location塊未提供匹配時，才會使用此塊
    location / {
        # root 代表根文件夾路徑 
        # 注意：是根文件夾，就是你打包好的項目的文件夾的下一層，放着你打包好的文件夾，及主頁面的文件還有logo文件的位置
        root   'C:\Users\Administrator\Desktop\dist';
        # index 代表你主頁面的文件名稱及文件的后綴 注意要帶分號
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    # 重定向錯誤頁面用的，
    # 這里定義錯誤代碼 500這些代表錯誤碼
    # 以及定向為那個頁面（這里的/代表到對應的nginx文件夾下的html文件夾下的文件 ）
    # C:/BtSoft/nginx/html/50x.html
    # 就是報這些錯誤碼的時候會給用戶返回 ‘C:/BtSoft/nginx/html/50x.html’ 頁面
    error_page   500 502 503 504  /50x.html;
    # 這個location塊明顯比上一個location塊要長，所以如果報錯了，肯定先匹配到當前的頁面下，為了節省網絡帶寬的消耗
    location = /50x.html {
       # root代表根文件，html代表？這里我不是很懂
       root   html;
    }

    
    }
    server {
        listen       5200;
        server_name  _;

        location / {
            root   'C:\Users\Administrator\Desktop\test';
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
    
        location = /50x.html {
        root   html;
        }

    
    }
    include vhost/*.conf; 
    #加載vhost目錄下的虛擬主機配置文件
}

經過以上操作，nginx部署vue項目成功，你就可以訪問你的url地址訪問你前端的項目了