vue-element-admin 是一個後臺前端解決方案，它基於 vue 和 element-ui實現。

 

通過使用這套模板我們可以快速搭建起完整的  後臺管理系統。

 

我們跟著 官網文件 快速建立起開發環境，但是一開始怎麼部署到linux的生產環境有點不知所措，這裡記錄下部署的流程和遇到的問題。

1、打包生成靜態檔案

# 打包正式環境
npm run build:prod

# 打包預釋出環境
npm run build:stage

但是這裡有個問題，會存在static/js資源找不到的問題，原因是 預設的 vue-admin-template 中的 vue.config.js 中的 publicPath 是 ‘/’,  這樣會導致打包出來的js都是 / 開頭的，即是根路徑下的檔案，但我們往往不需要這樣，修改為 './'， 意思為當前路徑下。

 

當我們打包好後 會生成一個 dist 資料夾

 

但我們如果直接開啟dist資料夾中的 index.html檔案會發現js檔案載入不了等問題，翻看文件可知需要把 這些靜態檔案釋出到靜態伺服器中。

       對於釋出來講，只需要將最終生成的靜態檔案，也就是通常情況下 dist 資料夾的靜態檔案釋出到你的 cdn 或者靜態伺服器即可，需要注意的是其中的 index.html 通常會是你後臺服務的入口頁面，在確定了 js 和 css 的靜態之後可能需要改變頁面的引入路徑。

 

2、釋出到靜態伺服器

靜態伺服器有很多，這裡採用nginx的方式配置，通過命令我們可以看到這時我們的nginx已經啟動。

開啟nginx.conf的配置，配置一個server，具體可以參考如下。

    server {
        listen       9104;
        location /projectStart/ {
            root   /data/project;
            autoindex on;
            autoindex_exact_size on;
            autoindex_localtime on;
        }
        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;
    }

這時我們可以看到 root地址 配置為 /data/project 資料夾，然後我們還配置了專案字首，所以我們應該把 dist的內容放到如下資料夾 下：

/data/project/projectStart

如下資料夾中的內容即dist中的內容

 

如果正常的話現在 我們可以通過  127.0.0.1:9104/projectStart 訪問到專案了。