一，在本地部署  

在進行部署之前，要下載node.js，然後在IDEA的終端裡用npm install 下載依賴，但是此時 node.js和node-sass版本要匹配否則會報很多的錯誤，版本匹配的話。

圖1.版本對應關係

dev.env.js裡邊的BASE_API是請求後端的介面。所以只是顯示前端的話這裡不用管，等到開始做後端時再修改相應的介面。

npm run dev 會執行成然後就可以在本地訪問mall的前端。

二，在伺服器上部署

伺服器採用的是騰訊雲，輕量級應用伺服器，4核8GB。

npm run build進行打包，生成dist檔案，然後我們在打包達成tar.gz，然後上傳到伺服器，然後安裝nginx。下面重點說一下nginx的安裝過程。

在此之前先進行docker的安裝。

圖2.docker的安裝過程

接下來安裝nginx：

1. docker pull nginx:1.10

2. docker run -p 80:80 --name nginx \
   -v /mydata/nginx/html:/usr/share/nginx/html \
   -v /mydata/nginx/logs:/var/log/nginx \
   -d nginx:1.10

3. docker container cp nginx:/etc/nginx /mydata/nginx/
4. mv nginx conf
5. docker stop nginx
6. docker rm nginx

7. docker run -p 80:80 --name nginx \
   -v /mydata/nginx/html:/usr/share/nginx/html \-v /mydata/nginx/logs:/var/log/nginx \
   -v /mydata/nginx/conf:/etc/nginx \
   -d nginx:1.10

其中一些除錯的過程就是，docker ps 看正在執行的容器   docker ps -a 看所有的容器  還有最重要的看日誌  docker logs nginx

tar -zxvf dist.tar.gz  這是解壓檔案，注意tar和tar.gz的解壓不一樣

rm -rf html    刪除nginx的html資料夾

mv dist html    移動dist資料夾到html資料夾

docker restart nginx   重啟   每次有新的更新，要重啟nginx。

注意在mydata中的logs中的access和error，要學會讀日誌。

小注：docker run的用法  主要的引數有兩個，-v,-p,  

1. -p主要是暴露出去的埠，就是外部要訪問的埠

2. -v給容器掛載儲存卷，掛載到容器的某個目錄