作者：MrWang

來源：SegmentFault 思否社區(qū)

---

簡介

很多情況下前端同學(xué)并不知道怎么部署項目，很多情況都是丟給后端或者運維來處理
今天就來給大家簡單介紹下如何來部署項目
這里以vue項目為例

項目配置

---

publicPath

在vue的項目文件vue.confing.js里將publicPath:設(shè)置為 './'
默認(rèn)情況下，Vue CLI 會假設(shè)你的應(yīng)用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應(yīng)用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應(yīng)用被部署在 https://www.my-app.com/my-app/，則設(shè)置 publicPath 為 /my-app/。

這個值也可以被設(shè)置為空字符串 ('') 或是相對路徑 ('./')，這樣所有的資源都會被鏈接為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應(yīng)用的文件系統(tǒng)中。

詳見publicpath

devServer.proxy

本地通過webpack的proxy來解決后端服務(wù)跨域問題，

devServer: {
....
    proxy: {
      '/bd': {
        target: `http://xxx.xxx.14.178:9101/`,
        changeOrigin: true
      }
    }
.....

詳見proxy

打包

npm run build

之后你會拿到一個dist目錄包。

---

服務(wù)器配置

準(zhǔn)備工具,這里推薦xshell、winscp、termius、MobaXterm等
ftp工具
ssh工具

ftp

輸入服務(wù)器賬號密碼登錄后，將dist目錄傳至服務(wù)器。比如/home/dist

ssh

檢查安裝nginx

也是輸入信息登錄后，先查看服務(wù)器有沒有nginx

nginx -t

如果有就會出現(xiàn)如下提示

[root@VM-8-3-centos ~]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

如果沒有就去下載個nginx

這里以centos7為例,詳見如何在CentOS7上安裝 Nginx
EPEL 倉庫中有 Nginx 的安裝包。如果你還沒有安裝過 EPEL，可以通過運行下面的命令來完成安裝：

sudo yum install epel-release

輸入以下命令來安裝 Nginx：

sudo yum install nginx

配置nginx

vi /etc/nginx/nginx.conf

將頂部的user nginx;改為user root;
再把80端口下的root改為你的靜態(tài)資源路徑/home/dist

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        root        /home/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }
        # 代理
        location ^~/bd/ {
            proxy_pass http://xxx.xxx.14.178:9101/bd/;
            proxy_buffers 256 4k;
            proxy_max_temp_file_size 0k;
            proxy_connect_timeout 30;
            proxy_send_timeout 60;
            proxy_read_timeout 60;
            proxy_next_upstream error timeout invalid_header http_502;            
        }
    }

啟動nginx

nginx    
nginx -s reload //重啟

然后你就可以用你的ip來訪問界面了

---

- END -