How to proxy static files with wepack devserver?

Question

My publicPath is /static/dist. How i can proxy static/dist to / when my dev server running?

I know i can:

let publicPath;
if (process.env.NODE_BUILD_DEPLOYMENT_PATH) {
    // Change process.env.NODE_BUILD_DEPLOYMENT_PATH to match the path to your files
    // in production (could be S3, CloudFront, etc.)
    publicPath = process.env.NODE_BUILD_DEPLOYMENT_PATH;
} else {
    publicPath = 'http://localhost:8099/';
}

But i need proxy. It's for pre-render. After render i need static/dist prefix for all my static files. But when my dev server running i want proxy static/dist to /.

For example: static/dist/js -> /js.

I tried [devServer.before](https://stackoverflow.com/a/67435323/2205911), I use `"@vue/cli-service": "^4.5.0"`, finally work code is: `const serveStatic = require('express-static'); module.exports = { devServer: { ... // https://stackoverflow.com/a/67435323/2205911 // 前端直接映射任意静态目录，就像nginx一样，不再依赖后端 before: (middlewares, devServer) => { devServer.app.use('/assets/', serveStatic('/home/snp/vue-static')); return middlewares; } } }` — Leo Lee, Nov 29 '22 at 11:16

score 0 · Answer 1 · answered Nov 12 '21 at 20:35

Solution is:

        server: {
            port: options.devServer.port,
            proxy: {
                '/static/dist/*': {
                    target: 'http://localhost:8099',
                    pathRewrite: {'^/static/dist/': ''}
                }
            }
        },

How to proxy static files with wepack devserver?

1 Answers1