前端开发手札fis篇——关于部署目录的问题

goji 发布于2019-08-20 10:24 / 742人阅读

摘要：部署问题由于部署生成的文件路径是网站目录根开始的如，导致网站发布必须是目录根才能有效加载。这是怎样处理更方便呢解决方法可以使用替换脚本脚本，会搜着目录下的所有文件并在开头的路径前面添加参数。

用了差不多一年多的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的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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