Home > Software design >  How can I force a refresh in my spa website with vuejs - laravel
How can I force a refresh in my spa website with vuejs - laravel

Time:05-09

Hi I know that this had been spoken but I have tried everything and nothing works.. so I come here one more time to ask a final or a solution to the big problem that it exists when I make some changes and the users do not see those changes I will show you what I have tried.

  1. I added version() in webpack.mix like this:

    const mix = require('laravel-mix');
    const tailwindcss = require('tailwindcss');
    require('laravel-mix-purgecss');
    
    mix.js('resources/js/app.js', 'public/js')
    .version()
    .sass('resources/sass/app.scss', 'public/css')
    .options({
       processCssUrls: false,
       postCss: [ tailwindcss('./tailwind.config.js') ],
    }) .purgeCss();
    

I added in layouts this:

I have two layout one to the frontend and another one to the backed so they organize like this:

 views>backend>layouts   to the backend

 views>layouts    to the frontend

I have in both this:

<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}" defer></script>

How you can see I change assets by mix

  1. Every time that I make a change I update the version in package.json

     {
       "version": "0.1.2",
       "private": true,
    
  2. I added this in both layouts:

    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="expires" content="Fri, 18 Jul 2014 1:00:00 GMT" />
    

and I do not know why I upload a change and the users, they look a old version of the page, even if they go out from the browser and they come in again they see the old version, or they look some parts of the website in blank, but if they go as unknown in the browser they can see the website working. I have to do CTRL SHIFT R to do a hard refresh and it sometimes works, F5 does not work at all they still look old website... and if the problem is in the phone they must delete the cache to see the website with the new version...

So I wonder and I really desesperate because I read and read I have tried all and nothing works.. how can I fix this BIG issue that I get... how can the user see the new website working automaticly when I upload a change? Thanks

CodePudding user response:

First of all if you can share your HTML output it can be useful.

Laravel mix has be generate links like below. Check your html output that is correctly generated links like this.

<script src="/js/app.js?id=0441ad4f65d54589aea5"></script>

and your /public/mix-manifest.json file must look like this;

{
    "/js/app.js": "/js/app.js?id=7399f803fb3a155486e9",
    "/css/app.css": "/css/app.css?id=6bea0cea688d689be1b1"
}

If it is not like this an seems like this;

{
    "/js/app.js": "/js/app.js",
    "/css/app.css": "/css/app.css"
}

Your webpack.mix file is wrong.

Try to version your assets only in production;

if (mix.inProduction()) {
    mix.version();
}

and run npm run prod before deploy.

  • Related