【較全面已成功部署】vue項目部署到伺服器流程

步驟：

1. 下載下傳Node.js & yarn

首先去進入官網下載下傳node，點選下載下傳即可

正常的流程就安裝好了，盡量下載下傳

node-v16.4.1-x64.msi

檔案，這個可以自動配置環境變量

如果用到了yarn，到官網下載下傳即可

然後測試一下是否安裝成功，打開cmd

2. 打開你的vue項目路徑(含有package.json檔案路徑)

先安裝依賴包

用管理者模式打開cmd

輸入

npm install

如果有yarn

yarn install

編譯一下子

npm run build

yarn run build

開發模式運作一下子

npm run serve

yarn run serve

編譯後項目打包成功會生成一個dist檔案夾

【較全面已成功部署】vue項目部署到伺服器流程 | 用到Node&yarn

檔案結構大概是這個樣子

給他上傳到伺服器上

對應的二級域名下建立的檔案夾中，或者按照你的路徑放置，然後配置nginx伺服器即可

(無寶塔面闆)

教程點選

(有寶塔面闆)

這個打開基本就可以了

此處以下内容參考部落格連結

3. 配置nginx.conf

server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            root /home/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  //解決重新整理頁面變成404問題的代碼
        }
        location /api{
             rewrite  ^/api/(.*)$ /$1 break;
             proxy_pass http://localhost:8080;
        }
    }

listen ：表示監聽端口8080
location ：dist檔案夾放置的位置
/api ：因為vue前端代理的時候，用的是api做名字，是以我們要在此處配置後端api端口：

//vue代理
proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {'^/api': ''}
      }
    },

【較全面已成功部署】vue項目部署到伺服器流程 | 用到Node&amp;yarn

步驟：