Using Laravel Vapor to try to inject publicPath to assets

• Laravel Mix Version: laravel-mix@5.0.0 / laravel-mix@4.0.0 (tried both)
• Node Version: v12.11.1
• NPM Version: 6.11.3
• OS: OSX 10.14

When using vapor deploy the assets (images) are not uploaded to the CDN.

The images themselves are inside .vue files. Mix/Webpack is rewriting the URLs, but not using the publicPath variable supplied via Vapor to serve them from cloudfront, the images themselves are copied to cloudfront.

For example, a vue file: Login.vue in resources/js/views/Login.vue has the following tag:

<img src="../../images/logos/logo.png" alt="Logo" class="w-32 m-auto mb-5" />

Which related to a file in /resources/images/logos/logo.png.

When npm run dev is executed, this is rewritten to /images/logo.png, and logo.png is copied to /public/images/logo.png as expected. When served locally this works fine.

However, when using the following code in webpack.mix.js (as taken from the Laravel Vapor docs) to inject a publicPath variable for serving the assets:

    const ASSET_URL = process.env.ASSET_URL + "/";

    mix.webpackConfig(webpack => {
        return {
            plugins: [
                new webpack.DefinePlugin({
                    "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
                })
            ],
            output: {
                publicPath: ASSET_URL
            }
        };
    });

It seems to completely ignore the publicPath output and still just rewriting the URL to /images/logo.png. The expected result is for it to prepend the ASSET_URL/publicPath provided. I have console.log() the ASSET_URL during a npm run dev(/production) and the URL is outputted correctly, so the issue is getting webpack/laravel-mix to actually using that in the complied source.

Using mix() inside blade files works as expected, but the image URLs are inside Vue files so webpack/laravel-mix needs to do the injecting.

Not sure if this is a bug or we’re doing something wrong, but seemingly have tried everything.

[Hulkmaster]

Issue needs te be opened

problem is still there

[russellgalpin]

We’re using Tailwinds CSS too, had to disable processCssUrl for that reason. But even with that enabled it wouldn’t fix it in the Vue.

Found a work around, but it’s not pretty. Credit - https://kevinchoppin.dev/blog/adding-your-cdn-to-image-references-in-js-and-css-with-laravel-mix

mix.imgCDN = function (path, cdn) {
    let file = new File(path);

    // Replace all occurrences of /images/ with CDN URL prepended
    let contents = file.read().replace(/\/images\//g, cdn+"/images/");
    file.write(contents);

    // Update version hash in manifest
    Mix.manifest.hash(file.pathFromPublic()).refresh();

    return this;
}.bind(mix);

mix.then(function(){
    let cdn = process.env.ASSET_URL;
    if (cdn !== undefined) {
        mix
            .imgCDN('public/css/app.css', cdn)
            .imgCDN('public/js/app.js', cdn);
    }
});

Basically do a massive search and replace in the code to find any instance of “/images/” and replace it with the CDN URL. It just seems like a really blunt tool - I wish mix/Webpack supported it correctly,