国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

CntChen / 2265人閱讀

摘要：項目開發完成，接下來是上線，關于項目的部署，我司前端是部署在服務器上，關于的相關文檔，請自行查閱本文只記錄部署時碰到的一些問題。其他總結文章常規打包優化方案組件通信處理方案后臺管理項目總結

項目開發完成，接下來是上線，關于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常規打包優化方案

組件通信處理方案

后臺管理項目總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/40500.html

相關文章

  • vue+express+mysql項目總結（node項目部署阿里云通用）

    摘要：原文發布于我的個人博客上原文點這里前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。我的遠程連接工具是用的是，文件上傳用的是。 原文發布于我的個人博客上：原文點這里 ??前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。下面我介紹下我的部署過程： 一、購買服務器和域名 ??如果需要域名（不用域名通過ip也可以訪問，雖然不方便，但可以節約一年幾十塊錢的...

    charles_paul 評論0 收藏0

  • vue+express+mysql項目總結（node項目部署阿里云通用）

    摘要：原文發布于我的個人博客上原文點這里前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。我的遠程連接工具是用的是，文件上傳用的是。 原文發布于我的個人博客上：原文點這里 ??前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。下面我介紹下我的部署過程： 一、購買服務器和域名 ??如果需要域名（不用域名通過ip也可以訪問，雖然不方便，但可以節約一年幾十塊錢的...

    dreamGong 評論0 收藏0

  • vue+express+mysql項目總結（node項目部署阿里云通用）

    摘要：原文發布于我的個人博客上原文點這里前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。我的遠程連接工具是用的是，文件上傳用的是。 原文發布于我的個人博客上：原文點這里 ??前面經歷千辛萬苦，終于把博客的所有東西都準備好了，現在就只等部署了。下面我介紹下我的部署過程： 一、購買服務器和域名 ??如果需要域名（不用域名通過ip也可以訪問，雖然不方便，但可以節約一年幾十塊錢的...

    newtrek 評論0 收藏0

  • Vue項目部署（阿里云+Nginx代理+PM2）

    摘要：最近部署一個項目到阿里云上，因為項目涉及一些跨域請求，所以采用了代理請求本地的服務利用做進程管理。先交代下在阿里云里安裝的部署環境調試運行大禮包，里面包含等，還能監控端口占用情況服務進程管理工具等等。不過目前只是實現構建部署訪問。 最近部署一個Vue項目到阿里云ECS上，因為項目涉及一些跨域請求，所以采用了Nginx代理請求本地的node服務（利用pm2做進程管理）。node服務借助a...

    Drinkey 評論0 收藏0

  • Vue項目部署遇到的問題及解決方案

    摘要：模式部署沒有什么問題，只要訪問到服務器上的，就可以訪問網站了。問題起因在做年度賬單項目的時候，項目部署的時候，用的是模式。這樣幾項配置后，就可以在子目錄下訪問網站，刷新也沒有問題。 寫在前面 Vue-Router 有兩種模式，默認是 hash 模式，另外一種是 history 模式。 hash：也就是地址欄里的 # 符號。比如 http://www.example/#/hello，...

    姘擱『 評論0 收藏0

發表評論

0條評論

CntChen

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<