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

goji 發(fā)布于2019-08-20 10:24 / 744人閱讀

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

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

部署問題

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

解決方法1

修改fis設置，添加url參數(shù)于靜態(tài)資源的構建規(guī)則中，例如：

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

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

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

解決方法2

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

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

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

    #!/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云服務器關于前端開發(fā) 關于安卓開發(fā)環(huán)境問題一篇關于關于javascript的問題

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

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

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

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

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

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

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

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

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

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

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

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

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