部署 en subcarpeta - Javascript

介绍

在开发中，我们有时需要将前端资源部署在主域名下的某个子目录下。例如，我们要在 www.example.com 下开发一个应用，但是我们希望将前端资源部署在 www.example.com/app 下。

本文将介绍如何使用 Javascript 将前端资源正确地部署在子目录下。

解决方案

方案一：手动拼接路径

一种解决方案是手动拼接路径（未使用框架的情况下）。

// 将 basePath 设为子目录路径
const basePath = '/app';

// 拼接子目录路径
const script = document.createElement('script');
script.src = `${basePath}/js/script.js`;

// 插入文档
document.head.appendChild(script);

这种方法虽然简单，但容易出错，需要手动拼接路径，并且在后续的开发中可能出现问题，因此不是最佳的解决方案。

方案二：使用 html-webpack-plugin 插件

另一种解决方案是使用 html-webpack-plugin 插件，该插件是 webpack 生态系统中的一部分，用于生成 HTML 文件，并自动引用 webpack 打包后的资源。该插件可以自动将资源路径匹配到子目录下。

// webpack 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist/app')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: '../index.html'
    })
  ]
};

在上述示例中，我们将输出路径指定为 dist/app，而 HtmlWebpackPlugin 插件指定的生成的路径是 ../index.html，这将使 HtmlWebpackPlugin 将生成的 HTML 文件放在 dist 目录下，并且资源路径自动匹配到子目录下。

这种方法比手动拼接路径更稳定、更易维护，是在实际开发中推荐的方式。

结论

以上两种方法均可用于将前端资源部署在子目录下。在没有使用框架的情况下，可以手动拼接路径，但是这种方法可能出现问题并且不易维护。在使用框架（如 React、Vue 等）时，可以使用对应的工具或插件（如 webpack 中的 html-webpack-plugin 插件）来处理前端资源的部署。