如何通过Webpack实现多PDF文件的别名路径重定向？

问题背景 #

我网站上有多个PDF文件，分布在不同目录下，示例路径如下：

• https://example.com/first_dir/a.pdf
• https://example.com/first_dir/b.pdf
• https://example.com/second_dir/c.pdf
• https://example.com/third_dir/d.pdf

现有别名映射字典：

const name_conversions = {
    'first_name'       : 'first_dir/a.pdf',
    'other_name'       : 'first_dir/b.pdf',
    'another_name'     : 'second_dir/c.pdf',
    'yet_another_name' : 'third_dir/d.pdf'
};

需要实现：访问https://example.com/first_name这类别名路径时，自动跳转到对应的PDF文件路径。已知Webpack Proxy仅适用于开发环境，找到redirect-webpack-plugin但不清楚用法，询问Webpack实现方式及无需复制PDF/创建大量文件的替代方案。

一、使用Webpack的redirect-webpack-plugin实现生产环境重定向 #

redirect-webpack-plugin可在构建时生成适配不同部署平台的重定向规则文件，无需手动创建大量跳转页面，具体用法如下：

1. 安装插件

npm install redirect-webpack-plugin --save-dev
# 或
yarn add redirect-webpack-plugin -D

2. 在webpack.config.js中配置
   将别名字典转换为插件所需的规则格式，传入插件配置：

const RedirectWebpackPlugin = require('redirect-webpack-plugin');

const name_conversions = {
    'first_name'       : 'first_dir/a.pdf',
    'other_name'       : 'first_dir/b.pdf',
    'another_name'     : 'second_dir/c.pdf',
    'yet_another_name' : 'third_dir/d.pdf'
};

// 转换为重定向规则数组：{ from: 别名路径, to: 目标PDF路径, status: 重定向状态码 }
const redirectRules = Object.entries(name_conversions).map(([alias, target]) => ({
    from: `/${alias}`,
    to: `/${target}`,
    status: 302 // 临时重定向，需永久重定向改为301
}));

module.exports = {
    // ...其他Webpack配置项
    plugins: [
        new RedirectWebpackPlugin({
            rules: redirectRules,
            // 输出重定向规则文件，Netlify/Vercel用'_redirects'，Apache用'.htaccess'
            outputPath: './',
            fileName: '_redirects'
        })
    ]
};

构建完成后，输出目录会生成_redirects文件，内容示例：

/first_name /first_dir/a.pdf 302
/other_name /first_dir/b.pdf 302
/another_name /second_dir/c.pdf 302
/yet_another_name /third_dir/d.pdf 302

将该文件与静态资源一同部署到对应平台，重定向规则即可自动生效。

二、无需Webpack的替代方案（无需复制PDF/创建大量文件） #

如果Webpack方案不适用，以下轻量化方案更直接：

1. Nginx配置重定向 #

直接在Nginx站点配置文件中添加重写规则，无需修改前端代码：

server {
    listen 80;
    server_name example.com;

    # 别名重定向规则
    rewrite ^/first_name$ /first_dir/a.pdf permanent; # permanent对应301永久重定向，redirect为302临时重定向
    rewrite ^/other_name$ /first_dir/b.pdf permanent;
    rewrite ^/another_name$ /second_dir/c.pdf permanent;
    rewrite ^/yet_another_name$ /third_dir/d.pdf permanent;

    # 其余站点配置...
}

重载Nginx配置后即可生效。

2. 前端路由重定向（SPA场景） #

若网站是单页应用，可通过前端路由框架实现重定向，以Vue Router为例：

const name_conversions = {
    'first_name'       : '/first_dir/a.pdf',
    'other_name'       : '/first_dir/b.pdf',
    'another_name'     : '/second_dir/c.pdf',
    'yet_another_name' : '/third_dir/d.pdf'
};

const routes = [
    // 生成重定向路由规则
    ...Object.entries(name_conversions).map(([alias, target]) => ({
        path: `/${alias}`,
        redirect: target
    })),
    // 其余路由配置...
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

访问别名路径时，前端路由会直接跳转到PDF地址，静态部署时需配置服务器支持SPA路由 fallback。

3. Apache .htaccess配置 #

使用Apache服务器时，创建.htaccess文件添加重定向规则：

Redirect 301 /first_name /first_dir/a.pdf
Redirect 301 /other_name /first_dir/b.pdf
Redirect 301 /another_name /second_dir/c.pdf
Redirect 301 /yet_another_name /third_dir/d.pdf

将文件放在网站根目录即可生效。

内容的提问来源于stack exchange，提问作者snatchysquid