__webpack_public_path__ 重新加载页面后不起作用

Question

我们正在开发一个使用 webpack 构建的 Vue.js 应用程序。要求是我们的应用程序不仅必须可以通过基本路径 / 访问，还可以通过自定义路径访问，以便可以在其他服务旁边访问该应用程序。使用 webpacks \__webpack_public_path__ 我能够针对指定的基本路径即时设置基本路径，就像当前路径中有 /foo/ 一样，基本路径应该从 .../foo/ 开始.

在应用程序中导航时，一切看起来都很好，只要我在基本路径上打开应用程序。问题是，在我导航到任何子路径并重新加载页面后，找不到任何文件。服务器将首先提供 index.html 并且我需要使用相对路径，因为必须动态确定基本路径。但是，如果打开基本路径以外的任何其他路径，index.html 中的相对路径将不会指向正确的 bundle.js 并且 \__webpack_public_path__ 将不会被设置...

目前我们的 webpack 配置中有两个入口点。第一个是一个 JS 文件，其中我们的全局变量 \__webpack_public_path__ 将根据当前访问的 URL 进行相对设置。所以假设基本路径应该从 /foo/ 开始，访问的 URL 是 https://www.host.com/some/path/foo/sub/sub1。因此，相对基本路径将是 /some/path/foo/，资产将在即 /some/path/foo/assets 处找到。 webpack 配置中使用的所有其他路径，如在文件加载器或任何其他插件中，都是相对的。

// webpack.config.js
...
module.exports = (env, argv) => ({
    ...
    entry: ['@babel/polyfill', './src/main/js/constants/webpack-public-path.js', './src/main/js/index.js'],
    output: {
        filename: 'assets/js/bundle.js',
        path: path.resolve(__dirname, relativeOutputPath),
        publicPath: '/'
    },
    module: {
        ...
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'file-loader',
            options: {
                name: 'assets/fonts/[name].[ext]'
            }
        }
        ...
    },
    ...
});


// webpack-public-path.js
__webpack_public_path__ = (() => {
    const BASE_PATH = '/foo/';
    let path = window.location.pathname;
    return path.includes(BASE_PATH) ? path.substring(0, path.indexOf(BASE_PATH) + BASE_PATH.length) : '/';
})();

有没有人遇到过类似的问题？是否有可能 index.html 中的相对路径可以在之后定义，或者可以在构建时由 webpack 定义？

Answer 1

我找到了解决问题的方法。我要做的是在 index.html 中手动加载所有必要的资产。不幸的是，我必须在两个不同的文件（index.html 和 webpack-public-path.js）上保持动态基本路径的确定，但至少它现在可以工作了。因此，在 index.html 中，我手动将相应的标签插入 DOM 中，因此根据确定的基本路径加载所有需要的资产。

__webpack_public_path__ 重新加载页面后不起作用

__webpack_public_path__ does not work after reloading the page

javascript

base-path

webpack

vue.js