vue-element-admin部署生產環境

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 訪問到項目了。