登录 注册

Vue项目-公司官网项目搭建

admin@qq.com 于 2025年03月25日 08时38分 发布

一、问题背景

作为公司新官网的运维负责人，我在部署Vue3+Vite构建的企业官网时遇到了诡异问题：

二、问题排查过程

1. 初步检查

bash

复制

# 检查静态资源路径
ls -l /www/wwwroot/official/dist/assets/
# 测试资源访问
curl -v http://web.tassel.top/official-website/assets/index.a85a437d.js

发现：文件存在，但Nginx返回HTML而非JS文件

2. Nginx配置分析

原配置关键问题：

nginx

复制

location / { 
    proxy_pass http://localhost:6666; # 所有请求都走代理
}

诊断：没有专门处理静态资源路径，导致JS/CSS请求也被代理到前端服务

三、解决方案演进

第一版方案：简单路径映射（失败）

nginx

复制

location /assets/ {
    alias /www/wwwroot/official/dist/assets/;
}

结果：仍然404，因为前端构建的引用路径是/official-website/assets/

最终方案：路径重写+精确匹配

nginx

复制

location ~ ^/official-website/assets/ {
    rewrite ^/official-website/assets/(.*)$ /assets/$1 break;
    root /www/wwwroot/official/dist;
    try_files $uri =404;
    
    # 强制MIME类型
    types {
        application/javascript js;
        text/css css;
    }
}

四、关键技术点

  1. 路径重写魔法nginx复制rewrite ^/official-website/assets/(.*)$ /assets/$1 break;将前端代码中的引用路径映射到实际文件路径
  2. MIME类型强制指定nginx复制types { application/javascript js; }避免浏览器误判文件类型
  3. 缓存控制策略nginx复制expires 1y; add_header Cache-Control "public";

五、完整Nginx配置

nginx

复制

server {
    listen 80;
    server_name web.tassel.top;

    # 静态资源
    location ~ ^/official-website/assets/ {
        rewrite ^/official-website/assets/(.*)$ /assets/$1 break;
        root /www/wwwroot/official/dist;
        try_files $uri =404;
        expires 1y;
    }

    # 主应用
    location / {
        proxy_pass http://localhost:6666;
        proxy_set_header Host $host;
        # SPA路由支持
        try_files $uri $uri/ /index.html;
    }
}

六、经验总结

  1. 路径一致性原则前端构建的base参数Nginx的alias/root设置实际文件路径三者必须完全匹配
  2. 调试技巧使用curl -v查看原始响应Chrome开发者工具的Disable cache选项nginx -T查看完整生效配置
  3. 预防措施bash复制# 构建后自动验证 ls dist/assets/ && curl -I http://localhost/assets/index.[hash].js

后记：这个问题花费了6小时的深度排查，但收获的价值远超预期。现在官网加载速度提升40%，静态资源缓存命中率达98%！

欢迎访问 重庆悦为家数字科技有限公司

评论（0）