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

步驟：

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

yarn run build

開發模式運行一下子

輸入

npm run serve

如果有yarn

yarn run serve

---

編譯后項目打包成功會生成一個dist文件夾

文件結構大概是這個樣子

給他上傳到服務器上

對應的二級域名下創建的文件夾中，或者按照你的路徑放置，然后配置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': ''}
      }
    },