本文通過部署vue-element-admin后臺管理項目來通俗易懂的教大家如何使用Nginx快速部署Vue項目

vue-element-admin項目地址 https://gitee.com/mirrors/vue-element-admin?_from=gitee_search

1.本地啟動 vue-element-admin 項目

# 克隆項目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 進入項目目錄
cd vue-element-admin

# 安裝依賴
npm install

# 建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug?？梢酝ㄟ^如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啟動服務
npm run dev

本地啟動成功

頁面訪問正常

2.發(fā)布 將項目打包

ctrl+C關(guān)閉項目

運行打包命令

# 構(gòu)建生產(chǎn)環(huán)境
npm run build:prod

多出一個dist文件夾

dist就是打包好的文件夾，將這個文件夾上傳到服務器中

注意這里一定要上傳到Nginx的目錄下面?。。。。。。。。。。。。。。。。?！

3.配置Nginx

添加一個server

修改參數(shù)：

listen ： 訪問端口號

server_name ：訪問地址

root ：vue項目的打包后的dist位置（但dist一定要放在Nginx文件下面）

使用地址訪問：

server {
        listen       8871;#默認端口是80，如果端口沒被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
        root        html/vue-admin/dist;#vue項目的打包后的dist
    
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
            index  index.html index.htm;
        }
        #對應上面的@router，主要原因是路由的路徑資源并不是一個真實的路徑，所以無法找到具體的文件
        #因此需要rewrite到index.html中，然后交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }
  }

使用域名訪問：

server {
        listen       80;#默認端口是80，如果端口沒被占用可以不用修改
        server_name  域名;

        #charset koi8-r;
    
        #access_log  logs/host.access.log  main;
        root        html/vue-admin/dist;#vue項目的打包后的dist
    
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否則會出現(xiàn)vue的路由在nginx中刷新出現(xiàn)404
            index  index.html index.htm;
        }
        #對應上面的@router，主要原因是路由的路徑資源并不是一個真實的路徑，所以無法找到具體的文件
        #因此需要rewrite到index.html中，然后交給路由在處理請求資源
        location @router {
            rewrite ^.*$ /index.html last;
        }
  }

Nginx配置HTTPS請看

http://www.itdecent.cn/p/806ad65d613e

4.訪問項目

服務器地址:8871