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

資訊專欄INFORMATION COLUMN

【Vue項目總結(jié)】項目nginx部署

CntChen / 2252人閱讀

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

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

打包

vue項目打包后，是生成一系列的靜態(tài)文件，包括項目的請求IP都打入包內(nèi)，如果后臺服務(wù)改動，這時你的前端文件，又要重新編譯打包，這里采用的是后臺管理項目總結(jié)提到的前端自行請求一個配置文件，動態(tài)修改你的相關(guān)配置。

靜態(tài)文件

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

請求文件

在項目store中請求你的配置文件，寫入state中，在調(diào)用的時候可以全局訪問到你的配置

// api.js
GetConfigApi() {
  return new Promise((resolve, reject) => {
    axios
      .get(`/config.json?v=${new Date().getTime()}`)
      .then(result => {
        const configApi = {
          API: result.data["api"], // 統(tǒng)一接口
        };
        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模式下
  }
}

修改完成，重啟服務(wù)訪問test.com

部署到子級目錄

當(dāng)我們需要把項目部署到子級目錄下時，則需要修改項目的BASE_URL，生成一個子級目錄下的絕對訪問路徑。修改對應(yīng)的.conf配置文件

server {
  listen  80;
  server_name  test.com;

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

修改完成，重啟服務(wù)訪問test.com/demo

緩存處理

前端項目的靜態(tài)文件常常會被瀏覽器緩存，而項目編譯后，js，css，圖片等實際上是已經(jīng)有hash值來去除了緩存，但是項目更新后，仍然會出現(xiàn)緩存問題，這是由于我們的項目整個入口都是在index.html文件上，瀏覽器實際是緩存了我們的html頁面，所以我們要在nginx中告訴瀏覽器，html文件不被緩存。

  location /demo {
    add_header Cache-Control "private, no-store, max-age=0";
    ...
  }
總結(jié)

這里只討論了nginx相關(guān)的部署，實際上vue-router文檔上是有相關(guān)的配置例子的。

其他總結(jié)文章：

webpack常規(guī)打包優(yōu)化方案

組件通信處理方案

后臺管理項目總結(jié)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/40500.html

相關(guān)文章

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

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

    charles_paul 評論0 收藏0

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

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

    dreamGong 評論0 收藏0

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

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

    newtrek 評論0 收藏0

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

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

    Drinkey 評論0 收藏0

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

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

    姘擱『 評論0 收藏0

發(fā)表評論

0條評論

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