GeekCoding101

  • Home
  • GenAI
    • Daily AI Insights
    • Machine Learning
    • Transformer
    • Azure AI
  • DevOps
    • Kubernetes
    • Terraform
  • Tech
    • CyberSec
    • System Design
    • Coding Notes
  • About
  • Contact
vue
Coding Notes

Vue: Secrets to Resolving Empty index.html in WebHistory

Greetings Hi there! I was trying some new stuff about VUE recently. I downloaded a free version of VUE Argon dashboard code and tried to compile it locally. It's straghtforward: Then I got the dist folder: Interesting... Then I double clicked the index.html, expecting it will display the beautiful landing page, but it didn't happen... This is strange... What went wrong? I tried npm run serve, it works well, I can see the portal and navigate between pages without issues. I must fix this! Should be quick! Bingo! The root cause is that the VUE project used router with createWebHistory instead of createWebHashHistory! It resulted a differenve ways to handle static assets and routing. Using createWebHistory in Production environment is required as it provides several significant benefits: I just want to use createWebHashHistory in my local development environment. The fix Now, the fix is easy. First, modify scripts in package.json to specify mode for serve and build, and I added two new items serve_prod and build_dev: Second, creating or editing vue.config.js as below: Lastly, update src/router/index.js to handle the mode accordingly: The original code was: Now it looks like this: Now, run npm run build_dev again, I can see the portal 😎 Thanks for reading! Have a good day! Thanks for reading! Have a good day!

April 8, 2024 0comments 837hotness 0likes Geekcoding101 Read all
Newest Hotest Random
Newest Hotest Random
Kubernetes Control Plane Components Explained A 12 Factor Crash Course in Python: Build Clean, Scalable FastAPI Apps the Right Way Golang Range Loop Reference - Why Your Loop Keeps Giving You the Same Pointer (and How to Fix It) Terraform Associate Exam: A Powerful Guide about How to Prepare It Terraform Meta Arguments Unlocked: Practical Patterns for Clean Infrastructure Code Mastering Terraform with AWS Guide Part 1: Launch Real AWS Infrastructure with VPC, IAM and EC2
Terraform Associate Exam: A Powerful Guide about How to Prepare ItGolang Range Loop Reference - Why Your Loop Keeps Giving You the Same Pointer (and How to Fix It)A 12 Factor Crash Course in Python: Build Clean, Scalable FastAPI Apps the Right WayKubernetes Control Plane Components Explained
Mastering Multiple Features & Vectorization: Supervised Machine Learning – Day 4 and 5 Terraform Meta Arguments Unlocked: Practical Patterns for Clean Infrastructure Code Quantization: How to Unlock Incredible Efficiency on AI Models Honored to Pass AI-102! An Adventurer's Guide to Base64, Base64URL, and Base32 Encoding Supervised Machine Learning – Day 6
Newest comment
Tag aggregation
cybersecurity security Transformer AI Machine Learning Daily.AI.Insight notes Supervised Machine Learning

COPYRIGHT © 2024 GeekCoding101. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang