Vue.js+Django项目部署后访问路径异常问题求助

我的项目采用Vue.js作为前端、Django RF作为后端。本地开发时，Vue项目根路径为localhost:8081/#/，访问localhost:8081/#/example可正常打开Example.vue组件，运行无异常。

在AWS Ubuntu实例上用Nginx部署项目后，执行npm run build，前端能与Django后端正常协作，但仅能通过www.myurl.com/static路径访问前端内容。直接访问www.myurl.com时，会显示一个写有“My Project is coming soon”的基础HTML页面，我找不到该文件在Ubuntu文件系统中的位置。

需要修正配置，使访问www.myurl.com时直接加载Vue打包后的文件。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto-static-files/

STATIC_URL = '/static/'
STATIC_ROOT = '/var/www/myurl.com/static'

STATICFILES_DIRS = [BASE_DIR / 'static']

# Media Files

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

# Default primary key field type
# https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

user ubuntu;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml applic>

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

# File: /etc/nginx/sites-available/myproject
# This file inherits from the http directive of /etc/nginx/nginx.conf

# Disable emitting nginx version in the "Server" response header field
server_tokens             off;

# Use site-specific access and error logs
access_log                  /var/log/nginx/myproject.access.log;
error_log                   /var/log/nginx/myproject.error.log;

# Redirect HTTP to HTTPS
server {
  server_name               .myurl.com;
  listen                    80;
  return                    307 https://$host$request_uri;
}

server {
  # Pass on requests to Gunicorn listening at http://localhost:8000
  location / {ESNT WORK EITHER   try_files $uri $uri/ /index.html;
    proxy_pass              http://localhost:8000;
    proxy_set_header        Host $host;
    proxy_set_header        X-Forwarded-Proto $scheme;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect          off;
    autoindex on;
    alias /home/ubuntu/myproject/dist;
  }

  # Serve static files directly
  location /static {
    autoindex on;
    alias /home/ubuntu/myproject/dist;
  }

   listen 443 ssl; # managed by Certbot
   ssl_certificate /etc/letsencrypt/live/www.myurl.com/fullchain.pem; # managed by Certbot
   ssl_certificate_key /etc/letsencrypt/live/www.myurl.com/privkey.pem; # managed by Certbot
   include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

1. 修复Nginx站点配置的逻辑冲突 #

当前location /块同时混用了proxy_pass和alias，还存在无效注释，导致路由逻辑混乱。正确配置需区分前端静态文件服务与后端API转发：

server {
  server_name               www.myurl.com;
  access_log                  /var/log/nginx/myproject.access.log;
  error_log                   /var/log/nginx/myproject.error.log;

  # 直接服务Vue打包后的静态文件，SPA路由兜底
  location / {
    root /home/ubuntu/myproject/dist;
    try_files $uri $uri/ /index.html;
    index index.html;
  }

  # 仅将API请求转发给Django（前缀/api可根据实际调整）
  location /api {
    proxy_pass              http://localhost:8000;
    proxy_set_header        Host $host;
    proxy_set_header        X-Forwarded-Proto $scheme;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect          off;
  }

  # 服务Django的静态资源（可选，根据STATIC_ROOT调整路径）
  location /static/django {
    alias /var/www/myurl.com/static;
    expires 30d;
  }

  listen 443 ssl; # managed by Certbot
  ssl_certificate /etc/letsencrypt/live/www.myurl.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/www.myurl.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

2. 移除Nginx默认站点 #

那个“Coming Soon”页面来自Nginx默认站点配置，执行以下命令禁用：

# 查看启用的站点
ls -la /etc/nginx/sites-enabled/
# 禁用默认站点（如果存在）
sudo unlink /etc/nginx/sites-enabled/default

3. 验证配置并重启Nginx #

# 检查Nginx配置语法
sudo nginx -t
# 重启生效
sudo systemctl restart nginx

4. Vue路由适配（可选） #

如果本地用的是hash模式（/#/），打包后无需调整；若要切换为history模式，需在Vue路由配置中修改：

const router = new VueRouter({
  mode: 'history',
  base: '/',
  routes: [...]
})

内容的提问来源于stack exchange，提问作者AMCO19