宝塔面板部署Vue项目并开启history路由模式完整指南

 基础环境检查
node -v   建议v14+
npm -v    建议6+
nginx -v  建议1.18+

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'index.',
  // 关键history配置
  devServer: {
    historyApiFallback: true
  }
}

npm run build

server {
    listen 80;
    server_name yourdomain.com;
    
    root /www/wwwroot/yourdomain.com;
    index index.;
    
     history路由核心配置
    location / {
        try_files $uri $uri/ /index.;
    }
    
     静态资源缓存配置
    location ~ .(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }
    
     禁止访问.git等敏感文件
    location ~ /.(?!well-known). {
        deny all;
    }
}

// router.js
const routes = [
  // ...其他路由
  {
    path: '/:pathMatch(.)',
    component: () => import('@/views/404.vue')
  }
]

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

location /api/ {
    proxy_pass http://backend_server;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

location ~ .()$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}