<ul id="yuoi2"></ul>

<abbr id="yuoi2"></abbr>

<strike id="yuoi2"></strike>

前端開發手札fis篇——關于部署目錄的問題

goji 發布于2019-08-20 10:24 / 752人閱讀

摘要：部署問題由于部署生成的文件路徑是網站目錄根開始的如，導致網站發布必須是目錄根才能有效加載。這是怎樣處理更方便呢解決方法可以使用替換腳本腳本，會搜著目錄下的所有文件并在開頭的路徑前面添加參數。

用了差不多一年多的fis，感覺他比其他構建工具更容易上手，擴展插件也比較多。但是詬病也是有的，比如接下來要說的部署問題，雖然fis3本身也有比較好的方案解決（設置url參數），但是對于部署不是給內部同事對接而是給客戶部署是遇到不少問題，今天剛好有時間把這個問題解決啦，順便也紀錄下來。

部署問題

由于fis3部署生成的文件路徑是網站目錄根開始的（如：/assets/img/bg.png），導致網站發布必須是目錄根才能有效加載。實際情況可能使用http://www.uxfeel.com/lxyz/這樣的目錄下發布，怎樣才能更好地發布呢？

解決方法1

修改fis設置，添加url參數于靜態資源的構建規則中，例如：

    let asset_dir = "/assets",
        url = "/lxyz/"+url;
    
    fis.match("**",{
        release: asset_dir + "/$0",
        url: url + "$&" //改變引用地址
    })

使用url參數fis就會很好幫你把訪問路徑替換好，但是并不靈活。

假如你的項目交付給客戶，然后他們先部署到測試服務器測試，然后再部署到其他服務器發布呢？
這是客戶需要找你進行代碼的發布，當然你可以給開發包讓他們弄，但是也有不講理的時候。這是怎樣處理更方便呢？

解決方法2

可以使用url替換腳本repath.sh

# $ repath.sh [group] [path]
$ repath.sh lxyz ../release/lxyz-publish

repath.sh腳本，會搜著目錄下的所有文件并在/assets/、"/assets/、 ("/assets/開頭的路徑前面添加[group]參數。

    #!/bin/bash
    
    group=$1
    path=$2
    sed -i "s@(/assets/@(/$group/assets/@g" `grep "/assets/" -rl $path`
    sed -i "s@("/assets/@("/$group/assets/@g" `grep "/assets/" -rl $path`
    sed -i "s@"/assets/@"/$group/assets/@g" `grep "/assets/" -rl $path`

雖然辦法可能蠢一點，但是很實用?

GPU云服務器云服務器關于前端開發關于安卓開發環境問題一篇關于關于javascript的問題

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

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

前端臨床手札——webpack構建逐步解構（上）

摘要：前言由于博主最近又閑下來了，之前覺得的官方文檔比較難啃一直放到現在。文章會逐步分析每個處理的用意當然是博主自己的理解，不足之處歡迎指出溝通交流。后續將會補上構建生產的配置分析，案例參考。前端臨床手札構建逐步解構下前言由于博主最近又閑下來了，之前覺得webpack的官方文檔比較難啃一直放到現在。細心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架，當然這個案例是基于vue的，...

lowett 2019-08-22 10:36 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

kid143 2019-08-19 18:17 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執行的測試用例實現代碼。測試工具斷言庫測試驅動開發及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

godlong_X 2019-05-29 16:57 評論0 收藏0
淺談 CSS Sprites 雪碧圖應用

摘要：編寫配置文件，以下是關鍵配置代碼雪碧圖合并輸出到文件參數執行目錄參數生成的和圖片的文件名之所以推薦，是因為非常的靈活，看懂模塊的可以根據你的項目情況編寫對應的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言網站開發90%會用到小圖標，多小圖標調用顯示是前端開發常見的問題；目前小圖標顯示常見有兩種方式...

MkkHou 2019-08-30 13:12 評論0 收藏0
前端臨床手札——webpack構建逐步解構（下）

摘要：續前端臨床手札構建逐步解構上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細可以看分支構建生產上一篇說完了本地測試和是如何工作，接下來分析構建生產模式下配置如何配置和每個模塊干了什么。續前端臨床手札——webpack構建逐步解構（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 評論0 收藏0