Index.html ionic-vue

Whenever I build my ionic-vue V6 application using ionic build, it generates a dist folder that’ll be deployed to prod. This makes sense but I cannot add a title for tab in the browser (default is “Vue App”) nor can I add an image for it because I can’t find a way to. I don’t see an index.html file generated by default by ionic-vue V6 when I created the project but should I add one anyway and specify the title, image, and other details there?

You can set the title and favicon in the /public/index.html file.

Yes but I have to do that every single time I build?

Seems inefficient by such a popular framework and I feel like there must be another way.

No. The build process doesn’t touch your public folder which by default contains index.html and the assets folder - reference. The public folder is the source of truth for the build process and should be committed in GIt.

Whatever is in the public folder should be used in the build process and will end up in the dist folder every build.

Hello, May I know what happens after dist folder contents are placed on server, currently, I am using FTP server to host the frontend, when I upload dist folder contents in the subfolder in a server, I see blank white page with no error, even network tab doesn’t have any errors.

Though while building ionic build, I got warning such that

(!) Some chunks are larger than 500 kBs after minification. Consider:

  • Using dynamic import() to code-split the application
  • Use build.rollupOptions.output.manualChunks to improve chunking: Configuration Options | Rollup
  • Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
    ✓ built in 33.62s

Is this causing the problem? or I can ignore it?

Thanks , can you please connect on Ionic Vuejs coming blank after ionic build blog as well ?

Thanks

See my response over here - Ionic Vuejs coming blank after ionic build - #2 by twestrick. It’s best to keep a discussion on one post.