1.Vue前端構建

➜ npm run build

構建成功後基本會在配置的dist檔案下生成靜態html檔案。

2.生成的靜態程式碼上傳到伺服器

把生成目錄dist裡的檔案打包上傳至伺服器(192.168.234.97)

➜ scp ./dist.zip root@192.168.234.97:/opt/www/vue-base

輸入伺服器登入密碼。

上傳到伺服器靜態地址

➜ /opt/www/vue-base

3.解壓 dist.zip

➜ unzip dist.zip

4.Nginx 配置

Nginx 安裝目錄

➜ cd /opt/software/nginx
 

進入Nginx安裝目錄，修改 Nginx 的配置檔案:

➜ vim conf/nginx.conf

修改如下：root 對映到靜態程式碼資料夾：

location / {
    #root   html;
    root   /opt/www/vue-base/dist;
    index  index.html index.htm;
}

5.啟動Nginx

進入Nginx安裝目錄，執行命令：

➜ ./nginx

重啟Nginx

➜ ./nginx -s reload

6.訪問