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

时间:2019-04-02 12:59:56

标签: javascript vue.js webpack base-path

我们正在使用Webpack构建的Vue.js应用程序。要求是我们的应用程序不仅必须通过基本路径/进行访问,而且还必须通过自定义路径进行访问,以便可以在其他服务旁边访问该应用程序。借助webpack \__webpack_public_path__,我可以针对指定的基本路径动态设置基本路径,例如,如果当前路径中包含/foo/,则基本路径应从.../foo/开始

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

当前,我们的webpack配置中有两个入口点。第一个是JS文件,其中将根据当前访问的URL相对地设置全局变量\__webpack_public_path__。因此,可以说基本路径应从/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定义相对路径?

1 个答案:

答案 0 :(得分:0)

我为我的问题找到了解决方案。我要做的是手动将所有必需的资产加载到index.html中。不幸的是,我必须维持两个不同文件(index.htmlwebpack-public-path.js)上动态基本路径的确定,但至少现在可以使用了。因此,在index.html中,我将相应的标签手动插入DOM中,并因此基于确定的基本路径加载所有需要的资产。