Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

Project NodeJS Version: v20.18.3

Run dev commands:

npm run dev

Run build commands:

npm run build

部署配置

本项目使用 Vue Router 的 History 模式，部署时需要配置服务器将所有非静态文件的请求回退到 index.html，否则直接访问子路由（如 /help）会返回 404。

Nginx

找到你站点 Nginx 配置文件（通常在 /etc/nginx/conf.d/xxx.conf 或 /etc/nginx/sites-available/xxx），在 location / 块中添加 try_files：

server {
    listen 80;
    server_name your-domain.com;
    root /你的部署目录/dist;  # 指向你构建产物的目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;  # 关键配置
    }

    # 静态资源缓存（可选，提升性能）
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

核心配置 try_files $uri $uri/ /index.html; 的含义：

1. 先尝试查找请求的文件（$uri）
2. 再尝试查找请求的目录（$uri/）
3. 都找不到就返回 index.html，让 Vue Router 接管路由

修改完配置后，执行以下命令使其生效：

# 检查配置语法是否正确
nginx -t

# 重新加载配置（无需重启）
nginx -s reload

Apache

在构建产物 dist 目录下创建 .htaccess 文件，内容如下：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 如果请求的是真实存在的文件或目录，直接访问
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # 否则全部转发到 index.html
  RewriteRule . /index.html [L]
</IfModule>

注意事项：

1. 确保 mod_rewrite 模块已启用：

   sudo a2enmod rewrite
   sudo systemctl restart apache2
   

2. 确保站点配置中允许 .htaccess 覆盖配置：

   <Directory /你的部署目录/dist>
       Options Indexes FollowSymLinks
       AllowOverride All
       Require all granted
   </Directory>
   

3. 修改完后重启 Apache：

   sudo systemctl restart apache2