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

資訊專欄INFORMATION COLUMN

單頁應用的部署方案

yanbingyun1990 / 2941人閱讀

摘要：所以單頁應用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動解析并導航到對應頁面。總結單頁應用與以前的常規多頁面應用還是有區別的，開發過程與后端解耦了，同時會出現跨域鑒權以及應用部署的問題。

本文同步發布于我的個人博客上 - 單頁應用的部署方案

本文主要簡單講一下單頁應用的開發及部署方法，默認你懂一些服務端知識及nginx知識，如果有任何可以在下方評論留言。
單頁應用

SPA（單頁應用）可以說是這幾年前端領域的一個技能棧了。

單頁應用不同與傳統的多頁面應用，顧名思義，單頁應用整個應用架構中只有一個實際頁面運行，再借助于H5的History API或hash路由來實現前端路由，從而實現了前后端的解耦，或者前后端分離。不同于以前，前端頁面都是放在后端項目的模板目錄下的，由服務端來渲染模板，并且由后端路由來決定一個請求應該渲染哪個模板，可以說前端對后端的依賴是非常大的。

單頁應用實現了前后端分離，頁面的渲染與路由跳轉都由前端同學自行控制，后端只提供API接口。這種模式下看似前端同學實現了一個大獨立，但是很多同學面對這種開發模式完全不知道如何搭建開發環境以及線上部署。

開發環境

開發環境的搭建一般來說比較簡單，常見的單頁應用框架都提供了腳手架，比如vue的vue-cli，只需要安裝后，一個vue create project就可以初始化一個項目，然后就可以開發了。

這里主要關注，與后端的調用關系。一般來說，項目里面直接去調用后端接口就可以了，但是單頁應用由于是前后端分離的，所以前后端的域名一般來說都不一樣，這樣就會出現一個跨域問題。

使用CORS可以很好的解決這個問題，但是這個是需要后端同學配合的，前端同學沒辦法干預。而且有些后端同學可能根本不了解CORS，這時候你就需要去跟后端同學扯皮，讓他給你支持跨域問題，碰到不好合作的同學真的很浪費時間。別笑，我還真遇到過這種問題，后端同學完全不知道CORS，學習半天，好不容易能支持了，又寫的亂七八糟的，后面改域名跟帶cookie時，又搞了好幾天，真的浪費時間。

這里咱們可以使用vue-cli的轉發功能來解決開發時的跨域問題：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:7002",
        changeOrigin: true
      },
    }
  }
}

這樣，前端發請求/api/user/detail這樣的請求就會轉發到后端的http://localhost:7002/api/user/detail了。由于前端不是直接請求后端接口，所以也就不會跨域了。

可以看到前端發出的請求會自動轉發到后端，并且不會觸發跨域。

線上部署

開發完成后面臨一個部署問題，一般來說部署的工作是輪不到前端來做的，一般會交給運維或者后端同學。但是咱們前端同學也要自強不息啊，開個玩笑，實際上很多情況下，小公司的運維同學可能自己都不知道怎么部署單頁應用，有些時候還是要自己上。

跟開發的時候一個思路，也可以將后端請求做一個轉發，這個時候就沒辦法通過devServer.proxy來轉發了。咱們可以通過NGINX來做一下轉發。

先看看單頁應用的部署，單頁應用開發完只有一個index.html，頁面的渲染及其他頁面都通過js來生成和控制。同時瀏覽器刷新頁面的時候，是會發請求到服務器的，所以如果按照常規方式來部署，就會出現在/user/detail這樣的頁面刷新的時候，會出現404錯誤，因為瀏覽器將頁面發到服務器，卻發現服務器上根本沒有這個資源，所以就404了。所以單頁應用的部署，需要將所有的頁面請求都返回index.html，瀏覽器下載了index.html后js會自動解析并導航到對應頁面。

# nginx.conf
server {
    listen 80;
    server_name www.yuexiaohao.com;
    root /home/yuexiaohao/project/spa/fe/dist;
    index    index.html index.htm;

    location / {
        etag         on;
        expires      max;
        try_files $uri $uri/ /index.html;
    }
}

配置好nginx啟動可以看到這時候網站以及可以在線上運行起來了。前端路由以及頁面刷新都沒有任何問題，但是數據請求肯定是有問題的，因為這個時候線上域名下可沒有/api/xxx接口，因為單頁應用打包出來的其實是一個只包含一個index.html的靜態網站，沒有任何動態語言能力的。

我們使用nginx來轉發一下數據請求：

# nginx.conf
server {
    listen 80;
    server_name www.yuexiaohao.com;
    root /home/yuexiaohao/project/spa/fe/dist;
    index    index.html index.htm;

    location /api/ {
        # 這里的接口地址自行修改即可，后端項目跟前端項目在一個機器上可以使用本地地址，或者使用內網地址，公網地址都沒有問題
        proxy_pass http://127.0.0.1:7002/api/;
    }

    location / {
        etag         on;
        expires      max;
        try_files $uri $uri/ /index.html;
    }
}

這個時候可以看到數據請求也OK了，整個部署過程就完成了。

總結

單頁應用與以前的常規多頁面應用還是有區別的，開發過程與后端解耦了，同時會出現跨域、鑒權以及應用部署的問題。但是通過工具以及nginx提供的代理或轉發功能，還是可以很好的跨域問題的。

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

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

相關文章

  • 用vue從零開發和部署一款移動端pwa單頁應用

    摘要：另外，單頁應用因為數據前置到了前端，不利于搜索引擎的抓取。所以我們需要對自己的單頁應用進行一些優化。 前言 最近秋招之余空出時間來按自己的興趣動手做了一個項目，一個基于vue-cli3.0, vue，typescript的移動端pwa，現在趁熱打鐵，將這個項目從開發到部署整個過程記錄下來，并將從這個項目中學習到的東西分享出來，如果大家有什么意見或補充也可以在評論區提出。先介紹一下這個項...

    Channe 評論0 收藏0

  • VUE單頁應用首屏加載速度優化方案

    摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內嵌定義了但是只用到一次的變量提取出出現多次但是沒有定義成變量去引用的靜態值此方法有待實踐，留待下次分享 單頁應用會隨著項目越大，導致首屏加載速度很慢！！！以下給出在下知道的幾種優化方案 使用CDN資源,減小服務器帶寬壓力 路由懶加載 將一些靜態js css放到其他地方（如...

    lewif 評論0 收藏0

  • VUE單頁應用首屏加載速度優化方案

    摘要：所以前端使用壓縮是沒有起作用的。影響，選項顯示警告在刪除沒有用到的代碼時不輸出警告刪除所有的語句還可以兼容瀏覽器內嵌定義了但是只用到一次的變量提取出出現多次但是沒有定義成變量去引用的靜態值此方法有待實踐，留待下次分享 單頁應用會隨著項目越大，導致首屏加載速度很慢！！！以下給出在下知道的幾種優化方案 使用CDN資源,減小服務器帶寬壓力 路由懶加載 將一些靜態js css放到其他地方（如...

    jubincn 評論0 收藏0

  • nginx + 一個端口 部署多個單頁應用（history模式）

    摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。 目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才...

    wemall 評論0 收藏0

  • nginx + 一個端口 部署多個單頁應用（history模式）

    摘要：介紹種相同端口部署多個單頁應用前端路由的方法。使用子域名區分，此種方法最是簡單。子域名訪問時路徑，盤下面文件為的服務器目錄。采用與作為區分，分別表示不同的項目。 目前web開發 使用一般前后端分離技術，并且前端負責路由。為了美觀，會采用前端會采用h5 history 模式的路由。但刷新頁面時，前端真的會按照假路由去后端尋找文件。此時，后端必須返回index（index.html）文件才...

    luoyibu 評論0 收藏0

發表評論

0條評論

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