Apr 15, 2024

Level 29

vue3 sfc issue, cannot update html main part.

Hello I have issue with SFC component, it acting like SPA, I can not add any html code for index.html. here is raw index.html

 <html lang="fi">
 <head>
   <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> </title>
 </head>
  <body class="border-spacing-1 w-7/12">
    <div class="p-4  text-center font-sans font-extrabold  ">
     <header class="sticky top-0 min-w-7 shadow-2xl">
       <div id="bannerit" class=" bg-white flex justify-center"></div>
    </header>          
  </div>  
  <main>

  </main>
     <script type="module" src="/src/main.js"></script>
  </body>
  </html>

here is compiled version with vite:

     <html lang="fi">
    <head>
   <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> </title>
    <script type="module" crossorigin src="/assets/index-ceSwkpV9.js"></script>
   <link rel="stylesheet" crossorigin href="/assets/index-B08vMMwh.css">
  </head>
  <body class="border-spacing-1 w-7/12">
   <div class="p-4  text-center font-sans font-extrabold  ">
     <header class="sticky top-0 min-w-7 shadow-2xl">
     <div id="bannerit" class=" bg-white flex justify-center"></div>
   </header>          
 </div>  
 <main>    
    <div>
    <p> testing line 1</p>
  </div>
  <div>
    <p> testing line 2</p>
  </div>
  <div>
    <p> testing line 3</p>
  </div>
 </main>
 </body>
 </html>

......... On server, source code still show old code: there is Laravel 10 as backend, I have done php artsan optimize:cleat to clear caches. did not work. http://domainshop.fi/

<html lang="fi">
<head>
 <meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> </title>
<script type="module" crossorigin src="/assets/index-ceSwkpV9.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B08vMMwh.css">

  </main>
   </body>
 </html>

Thanks Mika.

LaryAI

2 years ago

Level 58

Hello Mika,

It seems like you're having trouble seeing the changes you've made to your index.html file on the server. This could be due to a few reasons, and I'll try to address them with potential solutions.

Caching Issues: Even though you've run php artisan optimize:clear, there might still be caching issues. Make sure you've cleared all the different caches in Laravel:

php artisan cache:clear
php artisan config:clear
php artisan route:clear
php artisan view:clear

Vite Cache: If you're using Vite as your build tool, it might have cached the old version of your files. Try deleting the node_modules/.vite directory and then rerun npm run dev or npm run build.
Browser Cache: The browser might be caching the old version of your index.html. Try doing a hard refresh (Ctrl + F5 on Windows or Cmd + Shift + R on Mac) or opening the page in an incognito window to see if the changes are reflected.
Service Worker: If you're using a service worker, it might be serving the cached version of your files. You'll need to either unregister the service worker or update it to fetch the latest files.
Incorrect Public Path: Ensure that Vite is configured to output the build files to the correct public path that your Laravel application is serving. Check the vite.config.js file for the build.outDir setting.
Deployment Issue: If you're deploying to a server, ensure that the deployment process is correctly updating the files on the server. Sometimes, deployment scripts might fail to copy new files or overwrite old ones.
Server Configuration: Check your web server configuration to ensure that it's not serving a static version of your index.html file from a location other than the one you're updating.
File Permissions: Ensure that the file permissions on the server allow for the index.html to be updated. Incorrect permissions might prevent changes from being written to the file.

If you've checked all the above and the issue still persists, you might want to provide more details about your setup, such as the Vite configuration, Laravel version, and any other relevant information that could help diagnose the issue.

Remember to always back up your files before making changes to your configuration or deleting cache directories.

I hope this helps you resolve the issue with your Vue 3 SFC not updating the main HTML content. If you have any further questions or need more assistance, feel free to ask.

MaverickChan

2 years ago

Level 47

what do you mean a laravel backend? Same domain or diff?

Would you mind show your app.js file, or your main.js if you are using a pure vue framework instead of combined with laravel.

mikromike

2 years ago

Level 29

@MaverickChan

main.js

			 import { createApp } from 'vue'
			import './index.css'
			import App from './App.vue'
			createApp(App).mount('#bannerit')

mikromike

2 years ago

Level 29

@MaverickChan

app.vue

 <template>     
 <div id="image-Wrapper" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-0 md:mt-2 mb-6 " v-cloak>
         <banners-component>
        <slot></slot>
       </banners-component>             
 </div>

<script setup>
 import BannersComponent from './components/BannersComponent.vue'

mikromike

2 years ago

Level 29

two different domains, I have even delted index.html and js & css files from server (client domain).

but vue component is still running, where is cached, there is no cloudflare or any CDN, just Apache2.4.

mikromike

2 years ago

Level 29

I have added this to vite.config

	build: {
    		cssCodeSplit: true,
	 minify: true,
		rollupOptions: {
  		output: {
      		entryFileNames: `assets/[name]` + hash + `.js`,
    		chunkFileNames: `[name]` + hash + `.js`,
    		assetFileNames: `assets/[name]` + hash + `.[ext]`
      }
     }
   }

No changes.

Console.log says: BannerComponent updated index-ceSwkpV9.js:22:6282 updating Banner ... even js file has beed deleted.... Weird ;-C

gych

2 years ago

Level 29

Which steps do you take when deploying this to the server?

Please or to participate in this conversation.