Vue項目打包并部署nginx服務器的方法

這篇文章主要介紹“Vue項目打包并部署nginx服務器的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue項目打包并部署nginx服務器的方法”文章能幫助大家解決問題。

使用場景:

我們常使用前后端分離項目時,會需要將前端vue打包然后部署。

一.打包

vue項目其實可以直接通過一下語句進行打包：

npm run build

默認打包情況如下:

當我們需要將打包名稱以及靜態資源位置進行修改時便需要進行相應的配置:

1.首先在項目根目錄下創建vue.config.js文件

配置內容如下所示(附帶跨域問題解決):

module.exports = {
    //打包
    publicPath: './',
    outputDir: 'test', //打包輸出目錄
    assetsDir: './static', //放置生成的靜態資源
    filenameHashing: true, // 生成的靜態資源在它們的文件名中包含了 hash 以便更好的控制緩存
    lintOnSave: false, //設置是否在開發環境下每次保存代碼時都啟用 eslint驗證
    productionSourceMap: false,// 打包時不生成.map文件
    
    // 解決跨域配置
    devServer: {                //記住，別寫錯了devServer//設置本地默認端口  選填
        port: 8080,
        proxy: {                 //設置代理，必須填
            '/api': {              //設置攔截器  攔截器格式   斜杠+攔截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目標地址(后端設置的端口號)
                changeOrigin: true,              //是否設置同源，輸入是的
                pathRewrite: {                   //路徑重寫
                    '/api': ''                     //選擇忽略攔截器里面的單詞
                }
                /*也就是在前端使用/api可以直接替換為(http://localhost:9090)*/
            }
        }
    },
}

2.查看路由中(router/index.js)是否使用history,是的話修改為hash。或者將mode直接注掉，因為默認使用hash。

const router = new VueRouter({
  /*mode: 'history',*/
  mode: 'hash',
  routes:[]
})
 
export default router

然后再次使用npm run build進行打包就會出現test文件夾,已經其中靜態文件會放置到static中。

到此打包已經結束。

3.找到打包后文件的路徑

雙擊打包好的index.html文件,就可以看到是首頁了。

二.部署(nginx)

首先需要安裝nignx,這個毋庸置疑這里就不介紹。(或者后續會在nginx板塊放置具體安裝步驟)

直接在nginx.conf中進行配置即可:

server {
    listen   8021;
    server_name  localhost;
 
    location /test{
        alias    /home/hyq/vue_file;
        index  index.shtml index.html index.htm;
    }

配置具體含義：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    
    ssi on;
    ssi_silent_errors on;
    ssi_types text/shtml;
    
    #定義的服務器列表
    upstream cms {
        #這里代表代理的項目端口為127.0.0.1:8111端口(weight等配置自行查詢)
        server 127.0.0.1:8111 weight=5 max_fails=3 fail_timeout=20s;
    }
    server {
        listen       8096;              #nginx使用8096
        server_name  localhost;         #服務名稱

        location /menhu/cms {
            proxy_pass http://cms;      
            #請求轉向cms 定義的服務器列表。也就是訪問localhost:8096/menhu/cms 會轉向到上方服務器列          #表中的127.0.0.1:8111
        }   

        location /qgxzzfzhgljdpt {
            root   D:\BDWorkParce3\LPT_MENHU\wwwroot_release;   #根目錄
            index  index.shtml index.html index.htm;            #設置默認頁
            #訪問localhost:8096/qgxzzfzhgljdpt 會打開        D:\BDWorkParce3\LPT_MENHU\wwwroot_release\qgxzzfzhgljdpt下級中的index.shtml/index.html/index.htm默認頁
        }
        location ^~ /template {
            return 404;
        }
        location = /c/ {
            return 404;
        }
        location = /css/ {
            return 404;
        }
        location = /images/ {
            return 404;
        }
        location = /include/ {
            return 404;
        }
        location = /js/ {
            return 404;
        }
        location = /style/ {
            return 404;
        }
        location = /upload/ {
            return 404;
        }
        location = /html/ {
            return 404;
        }
        location = /root/ {
            return 404;
        }
        location ~ .*.(svn|Git|git) {
            return 404;
        }

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

}
########### 每個指令必須有分號結束。#################
#user administrator administrators;  #配置用戶或者組，默認為nobody nobody。
#worker_processes 2;  #允許生成的進程數，默認為1
#pid /nginx/pid/nginx.pid;   #指定nginx進程運行文件存放地址
error_log log/error.log debug;  #制定日志路徑，級別。這個設置可以放入全局塊，http塊，server塊，級別以此為：debug|info|notice|warn|error|crit|alert|emerg
events {
    accept_mutex on;   #設置網路連接序列化，防止驚群現象發生，默認為on
    multi_accept on;  #設置一個進程是否同時接受多個網絡連接，默認為off
    #use epoll;      #事件驅動模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport
    worker_connections  1024;    #最大連接數，默認為512
}
http {
    include       mime.types;   #文件擴展名與文件類型映射表
    default_type  application/octet-stream; #默認文件類型，默認為text/plain
    #access_log off; #取消服務日志    
    log_format myFormat '$remote_addr–$remote_user [$time_local] $request $status $body_bytes_sent $http_referer $http_user_agent $http_x_forwarded_for'; #自定義格式
    access_log log/access.log myFormat;  #combined為日志格式的默認值
    sendfile on;   #允許sendfile方式傳輸文件，默認為off，可以在http塊，server塊，location塊。
    sendfile_max_chunk 100k;  #每個進程每次調用傳輸數量不能大于設定的值，默認為0，即不設上限。
    keepalive_timeout 65;  #連接超時時間，默認為75s，可以在http，server，location塊。

    upstream mysvr {   
      server 127.0.0.1:7878;
      server 192.168.10.121:3333 backup;  #熱備
    }
    error_page 404 https://www.baidu.com; #錯誤頁
    server {
        keepalive_requests 120; #單連接請求上限次數。
        listen       4545;   #監聽端口
        server_name  127.0.0.1;   #監聽地址       
        location  ~*^.+$ {       #請求的url過濾，正則匹配，~為區分大小寫，~*為不區分大小寫。
           #root path;  #根目錄
           #index vv.txt;  #設置默認頁
           proxy_pass  http://mysvr;  #請求轉向mysvr 定義的服務器列表
           deny 127.0.0.1;  #拒絕的ip
           allow 172.18.5.54; #允許的ip           
        } 
    }
}

然后啟動或者重啟nginx即可。

訪問:服務器地址:8021/test 即可。

關于“Vue項目打包并部署nginx服務器的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。