代码编写完成但页面无法正常运行，网站部署后未按预期显示页面却展示目录的技术咨询

Hey there, let's work through your two problems step by step—getting your code to run locally, and fixing the directory listing showing up instead of your deployed site.

1. Local Page Won't Run Properly #

• Check Browser DevTools for Errors: Hit F12 to open DevTools, then head to the Console tab to look for JavaScript syntax errors, undefined variables, or failed resource loads. The Network tab will show if your CSS, JS, or image files are returning 404 errors (meaning the paths are wrong). Fixing these errors is usually the fastest way to get things working.
• Verify Your Local Server Setup: If you're using a development server (like npm run dev for React/Vue, or python -m http.server for static sites), make sure the terminal shows no startup errors. Double-check you're accessing the correct URL (e.g., http://localhost:3000 instead of opening the HTML file directly in the browser—opening files directly can cause CORS or path issues).
• Reinstall Dependencies: If you're using a package manager (npm/yarn), delete your node_modules folder and run npm install again. Corrupted or missing dependencies are a common culprit for runtime failures.
• Validate File Paths: Double-check relative paths in your HTML/CSS/JS files. For example, if your index.html is in a src folder, a link to ../css/style.css needs to point to a file that actually exists at that location. Typos in paths are easy to miss!

2. Deployed Site Shows Directory Structure Instead of Content #

• Set a Default Entry File: Most web servers (Nginx, Apache, Netlify, Vercel) look for specific default files like index.html when loading a site. If your main page has a different name (e.g., main.html), rename it to index.html or update your server's configuration to use your custom entry file.
• Deploy the Correct Build Files: For framework-based sites (React, Vue, Svelte), don't deploy your raw source code. First run the build command (like npm run build) to generate a dist or build folder, then deploy only that folder. Deploying source files will leave the server without a proper entry point.
• Check File Permissions: Some servers require your static files to have readable permissions. If your server can't access index.html, it will fall back to showing the directory list. Ensure your files have the correct permissions (usually 644 for files, 755 for folders).
• Fix SPA Routing (If Applicable): If you're building a single-page app (SPA) with client-side routing, refreshing the page or accessing subroutes might trigger a directory list. You need to configure your server to redirect all requests to index.html. For example:
  • In Nginx, add this to your config: try_files $uri $uri/ /index.html;
  • On Netlify, create a _redirects file with: /* /index.html 200

内容的提问来源于stack exchange，提问作者MaKeR