vite打包部署问题总结

### 解决 Vite 打包部署后遇到的 404 错误 当使用 `createWebHistory` 部署 Vue 应用时，可能会遇到刷新页面时报错的情况。这是因为服务器无法识别前端路由所请求的 URL，从而返回 404 页面[^3]。 #### 使用 Hash 模式的解决方案 一种简单的解决方法是将路由模式更改为哈希模式 (`createWebHashHistory`)。这种方式会在 URL 中加入 `#` 符号来区分前后端路由： ```javascript import { createRouter, createWebHashHistory } from 'vue-router' const router = createRouter({ history: createWebHashHistory(), routes: [...], }) ``` 这种方法可以避免 404 的发生，但是会改变 URL 形式，可能不符合某些项目的美观需求。 #### 修改服务器配置 对于希望保持 HTML5 History API (即无 `#` 号) 路径风格的应用来说，则需调整 Web 服务器设置以支持单页应用(SPA)，确保所有未知路径都指向 index.html 文件。具体做法取决于使用的服务器软件: - **Nginx**: 添加如下配置片段至站点配置文件内： ```nginx location / { try_files $uri $uri/ /index.html; } ``` - **Apache**: 同样地，在 `.htaccess` 或者 Apache 主配置里增加重定向指令： ```apacheconf RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] ``` 通过上述更改可以让任何未匹配到实际资源的请求都被导向入口文件，进而让前端框架接管并处理这些地址。 另外需要注意环境变量的问题。`.env.development` 文件中的配置仅适用于开发阶段；一旦进入生产环节，应该依赖于 `.env.production` 来定义必要的参数，以免因路径差异引发错误[^2]。