成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

CntChen / 2267人閱讀

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

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

打包

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

靜態(tài)文件

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

請求文件

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

// 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部署

因?yàn)?b>vue-router有hash和history不同的兩種模式，使用不同的模式，nginx的配置不同，hash模式下，不需要改動(dòng)，只需要部署你的前端文件就可以了，所以這里只討論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)我們需要把項(xiàng)目部署到子級目錄下時(shí)，則需要修改項(xiàng)目的BASE_URL，生成一個(gè)子級目錄下的絕對訪問路徑。修改對應(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

緩存處理

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

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

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

其他總結(jié)文章：

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

組件通信處理方案

后臺(tái)管理項(xiàng)目總結(jié)

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

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

相關(guān)文章

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

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

    charles_paul 評論0 收藏0

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

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

    dreamGong 評論0 收藏0

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

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

    newtrek 評論0 收藏0

  • Vue項(xiàng)目部署（阿里云+Nginx代理+PM2）

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

    Drinkey 評論0 收藏0

  • Vue項(xiàng)目部署遇到的問題及解決方案

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

    姘擱『 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<