【Vue項目總結】項目nginx部署

項目開發完成，接下來是上線，關於vue項目的部署，我司前端是部署在nginx服務器上，關於nginx的相關文檔，請自行查閱；本文只記錄部署時碰到的一些問題。

打包

vue項目打包後，是生成一系列的靜態文件，包括項目的請求IP都打入包內，若是後臺服務改動，這時你的前端文件，又要從新編譯打包，這裏採用的是後臺管理項目總結提到的前端自行請求一個配置文件，動態修改你的相關配置。

• 靜態文件

// config.json
{
  "api": "test.com"
}

• 請求文件

在項目store中請求你的配置文件，寫入state中，在調用的時候能夠全局訪問到你的配置

// api.js
GetConfigApi() {
  return new Promise((resolve, reject) => {
    axios
      .get(`/config.json?v=${new Date().getTime()}`)
      .then(result => {
        const configApi = {
          API: result.data['api'], // 統一接口
        };
        resolve(configApi);
      })
      .catch(error => {
        reject(error);
      });
  });
}

nginx部署

由於vue-router有hash和history不一樣的兩種模式，使用不一樣的模式，nginx的配置不一樣，hash模式下，不須要改動，只須要部署你的前端文件就能夠了，因此這裏只討論history模式下.conf文件的修改

訪問修改nginx配置文件nginx.conf

server {
  listen  80;
  server_name  test.com;

  location / {
    root  /front; // 前端文件路徑
    index  index.html; // hash模式只配置訪問html就能夠了
    try_files $uri $uri/ /index.html; // history模式下
  }
}

修改完成，重啓服務訪問test.com

部署到子級目錄

當咱們須要把項目部署到子級目錄下時，則須要修改項目的BASE_URL，生成一個子級目錄下的絕對訪問路徑。修改對應的.conf配置文件

server {
  listen  80;
  server_name  test.com;

  location /demo { // 子級目錄
    alias  /front/demo;
    index  index.html;
    try_files $uri $uri/ /demo/index.html; 
  }
}

修改完成，重啓服務訪問test.com/demo

緩存處理

前端項目的靜態文件經常會被瀏覽器緩存，而項目編譯後，js，css，圖片等其實是已經有hash值來去除了緩存，可是項目更新後，仍然會出現緩存問題，這是因爲咱們的項目整個入口都是在index.html文件上，瀏覽器實際是緩存了咱們的html頁面，因此咱們要在nginx中告訴瀏覽器，html文件不被緩存。

location /demo {
    add_header Cache-Control 'private, no-store, max-age=0';
    ...
  }

總結

這裏只討論了nginx相關的部署，實際上vue-router文檔上是有相關的配置例子的。

其餘總結文章：

• webpack常規打包優化方案
• 組件通訊處理方案
• 後臺管理項目總結