Vue-Pure-Admin项目部署路径配置问题解析

问题现象

在使用Vue-Pure-Admin框架进行项目部署时，当配置了特定的打包路径和路由模式后，出现了页面刷新后访问异常的问题。具体表现为：用户登录成功后，刷新页面时系统提示资源加载失败或路由匹配错误。

核心配置分析

该问题主要涉及三个关键配置项：

1. VITE_PUBLIC_PATH：设置为"/pure/"，这表示项目将被部署在服务器的/pure子目录下
2. VITE_ROUTER_HISTORY：设置为"h5"，表示使用HTML5历史模式路由
3. VITE_COMPRESSION：设置为"none"，表示不启用任何压缩

问题根源

这种配置组合下出现刷新异常的根本原因在于：

1. HTML5路由模式与服务器配置不匹配：当使用history模式时，刷新页面会直接向服务器请求当前URL路径的资源，而服务器需要正确配置才能返回应用的入口文件(index.html)

2. 公共路径配置影响：设置了VITE_PUBLIC_PATH为/pure/后，所有静态资源都会基于这个路径加载，但服务器可能没有正确映射这个路径

3. 路由base参数缺失：虽然配置了VITE_ROUTER_HISTORY为"h5"，但没有指定base参数，导致路由匹配可能出现问题

解决方案

1. 服务器配置调整

对于Nginx服务器，需要添加以下配置：

location /pure {
    try_files $uri $uri/ /pure/index.html;
}

对于Apache服务器，需要配置.htaccess文件：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /pure/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /pure/index.html [L]
</IfModule>

2. 前端配置优化

修改环境配置文件(.env.production)：

# 明确指定base参数
VITE_ROUTER_HISTORY = "h5,/pure/"

3. 构建参数验证

确保构建命令正确使用了生产环境配置：

npm run build:pro

最佳实践建议

1. 开发与生产环境一致性：尽量保持开发环境和生产环境的路径配置一致，减少部署时的适配问题

2. 路由模式选择：如果无法控制服务器配置，建议使用hash模式路由，可以避免刷新问题

3. 路径配置规范：公共路径配置应以斜杠开头和结尾，如"/pure/"而非"/pure"

4. 部署前测试：在本地使用serve等工具模拟生产环境进行测试，提前发现问题

总结

Vue-Pure-Admin项目在部署时出现刷新异常问题，主要是由于HTML5路由模式与服务器配置不匹配导致的。通过正确配置服务器重写规则和前端路由base参数，可以完美解决这个问题。对于无法修改服务器配置的场景，切换为hash路由模式是更简单的解决方案。