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

我们正在开发一个使用webpack构建的Vue.js应用程序。要求是我们的应用程序不仅必须可以通过基本路径访问,/而且还可以通过自定义路径访问,以便可以在其他服务旁边访问该应用程序。使用webpack,\__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定义?


qq_笑_17
浏览 600回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript