Webpack未添加前置斜杠求助：懒加载语言文件路径错误

Hey there, let's tackle this path problem you're facing! The root cause here is that __webpack_require__.p (which maps to Webpack's publicPath configuration) is currently set to /user/ instead of the root /. That's why your chunk is loading from http://localhost:8000/user/0.app.js instead of the expected root path.

Here are a few actionable solutions to fix this:

1. Adjust Webpack's publicPath Configuration #

This is the most straightforward fix, since __webpack_require__.p directly pulls from this setting.

For Vue CLI Projects (vue.config.js) #

Update your configuration to set publicPath to the root directory:

module.exports = {
  // Set publicPath to root for both dev and prod (adjust if needed for production)
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
};

For Raw Webpack Projects (webpack.config.js) #

Add or modify the publicPath in your output settings:

module.exports = {
  output: {
    publicPath: '/', // Ensures all assets load from the root
    // ... other output settings
  }
};

Note: If you need different paths for production vs development, you can use environment variables to conditionally set this value.

2. Override the Chunk Path Manually (If Global Config Change Isn't Feasible) #

If you can't modify the global publicPath (e.g., some parts of your app rely on the /user/ base path), you can adjust the script src directly to use an absolute root path:

// Replace the original line with this
script.src = `/${chunkId}.app.js`;

This bypasses __webpack_require__.p entirely and forces the chunk to load from the root. Just keep in mind this is a hardcoded fix and less flexible than adjusting Webpack's config.

3. Verify Router Base Path (If Using Client-Side Routing) #

If you're using Vue Router, React Router, or another client-side routing library, check if you've set a base path that's overriding your expected root. For example, in Vue Router:

const router = createRouter({
  history: createWebHistory('/user/'), // This would add /user/ to paths
  // ... routes
});

If this is the case, you'll need to either remove the base path or adjust your Webpack publicPath to match it (but that would mean your chunks load from /user/, which isn't what you want here). So removing the base path is the right move for your desired outcome.

After making these changes, restart your development server and test the lazy loading again. Your chunk should now load from http://localhost:8000/0.app.js, and your language file lazy loading (import(lang/${i18n.locale})) should also work correctly since Webpack will use the updated publicPath for those imports too.

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