前端开发中的几种资源重定向方法

江米小枣

发布于 2020-06-15 15:01:29

2.4K0

发布于 2020-06-15 15:01:29

文章被收录于专栏：云前端

在前端开发，尤其是开发SPA(单页应用)的时候，一个常见的需求是在调试和测试环境下搭建服务器实现资源的重定向。简单说就是静态资源直接返回，前端路由统归index.html，而ajax请求都指向入口请求地址等

嗯，但是为嘛需要这么做呢...... 这道题面试中也真有很多稀里糊涂做完类似的项目，却答不上来的小伙伴，那你自个儿寻思去吧~

简单梳理一下就会发现，我们林林总总的新老项目中，根据前端开发阶段技术选型的不同，面对同样的重定向问题，会有几种不同的解决方法，本文就来简单梳理一下：

1. Apache + PHP

一些老项目中，直接编写php提供调试假数据，用apache服务器搭配php模块的方法提供环境，这种情况下就要采用.htaccess文件：

.htaccess主要的作用有：URL重写、自定义错误页面、MIME类型配置以及访问权限控制等
.htaccess的用途范围主要针对当前目录

# [apache服务器的 httpd.conf]   #开启模块
   LoadModule rewrite_module modules/mod_rewrite.so
   
    ...    
   #建一个虚拟主机目录
   Listen 8081
   NameVirtualHost *:8081    
      <VirtualHost *:8081>
     ServerName localhost:8081
     DocumentRoot  "X:/path/to/your/dir"
     <Directory "X:/path/to/your/dir">
       Require all granted
       AllowOverride All      
         </Directory>
   </VirtualHost>

# [项目目录的 .htaccess]
   
   #开启重定向
   RewriteEngine On
   
   #遇到已有的文件或目录就直接访问
   RewriteCond %{REQUEST_FILENAME} !-f    
    RewriteCond %{REQUEST_FILENAME} !-d    
   
    #根据规则分别重定向前后端路由
   RewriteRule !^ajaxprefix /index.html    
    RewriteRule ^ajaxprefix.* /index.php

2. PHP Built-in web server

对上述老项目稍加改造，就可实现项目中自启动一个测试服务器；方法是利用 PHP 5.4.0 起提供的一个内置的Web服务器(Built-in web server)

URI请求会被发送到PHP所在的的工作目录（Working Directory）进行处理，除非你使用了-t参数来自定义不同的目录
如果请求未指定执行哪个PHP文件，则默认执行目录内的index.php 或者 index.html。如果这两个文件都不存在，服务器会返回404错误
启动这个Web Server时，如果指定了一个PHP文件，则这个文件会作为一个“路由”脚本，意味着每次请求都会先执行这个脚本。如果这个脚本返回 FALSE ，那么直接返回请求的文件（例如请求静态文件不作任何处理）。否则会把输出返回到浏览器

这种方法摆脱了对外部apache的依赖，但仍要求机器上装有php环境

//Gruntfile.js
php: { //此处利用了grunt-php这个封装
   dist: {
       options: {
           hostname: 'localhost',
           port: 8081,
           base: "path/to/your/dir",
           keepalive: false,
           silent: true,
           open: 'index.html',
           router: 'router.php' //“路由”文件
       }
   }
},

# router.php
<?php

$uri = $_SERVER["REQUEST_URI"];

//静态资源直接访问
if (preg_match('/\.(?:png|jpg|jpeg|gif|css|js)$/i', $uri)) {   
 return false;
}

//根据规则分别重定向前后端路由
if (preg_match('/^\/ajaxprefix\//', $uri)) {	
    include_once __DIR__.'/path/index.php';
} else {	
    include_once __DIR__.'/path/index.html';
}
   
?>

3. webpack dev server + express

红红火火恍恍惚惚的流行开发工具webpack，就不须多说了，直接看关键配置：

historyApiFallback的意思是当路径匹配的文件不存在时不出现404, 而是定向到配置的选项historyApiFallback.index对应的文件(或直接到index.html)，也就实现了前端重定向
用proxy选项代理请求到一个http服务器(用express配置的ajax响应)，从而实现ajax请求重定向
该组合一般用于开发时调试

//webpack.config.js
devServer: {
   port: serverConfig.port,
   hot: true,
   contentBase: [
     resolve(__dirname, 'path/to/dir'),
     serverConfig.mock_path
   ],
   watchContentBase: true,
   publicPath: '/',
   stats: {
     colors: true,
   },
   proxy: {
     [`ajaxprefix/*`]: `http://mock.test.com`
   },
   historyApiFallback: true
 },

4. nodejs + express

在一些小项目中，或对webpack项目的发布目录预览时，直接使用nodejs简单达到目的也是可以的：

const app = new express;
app.set('view engine', 'html');
app.set('views', __dirname + '/');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static(dir, {index: 'index.html'}));

//重定向前端路由等
app.use(new RegExp('^(?!\\ajaxprefix)'), (req, res) => {
 res.sendFile(
    join(__dirname, './path/to/index.html')
   );
});

const server = http.createServer(app);

//对ajax请求应用规则
app.get('path', (res, req)=>{});
app.post('path', (res, req)=>{});...

-------------------------------------

有前端开发的简历欢迎推荐！可在文章底部留言或在公众号直接发消息，谢谢~

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2017-05-18，如有侵权请联系 cloudcommunity@tencent.com 删除

php