Vue SPA本地Nginx托管index.html、CDN加载资源时URL重复及History模式路由异常问题

我完全懂你现在的头疼——本来想通过把静态资源丢到CDN、本地只托管index.html来优化加载，结果反而搞出了地址栏URL乱拼接的怪事，好好的history模式也没了美观性。别着急，咱们一步步捋清楚问题出在哪，再解决它。

问题根源分析 #

你把publicPath设成了CDN的完整URL（带https://那种），这其实是个小坑：Vue CLI的publicPath不仅管静态资源的加载路径，还会间接影响路由的基础路径判断。当index.html从本地域名加载后，Vue初始化路由时，误把这个完整的CDN URL当成了路由的base路径，所以才会把它拼到浏览器地址栏里，导致URL变得乱七八糟。

解决方案一：调整publicPath+Nginx反向代理（推荐） #

这个方案能让你既保留CDN加载资源的优势，又能让路由保持干净的域名路径，同时避免跨域问题：

1. 修改vue.config.js的publicPath为相对域名的路径前缀，比如/cdn/：

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  filenameHashing: true,
  publicPath: '/cdn/', // 换成相对域名的前缀，不要完整URL
});

2. 在Nginx配置里添加一个location块，把这个前缀路径反向代理到你的CDN地址：

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name example.com www.example.com;

  # 新增：代理CDN资源请求
  location /cdn/ {
    proxy_pass https://cdn.example-cdn.digitaloceanspaces.com/builds/webapp/production/latest/;
    proxy_ssl_server_name on;
    proxy_set_header Host cdn.example-cdn.digitaloceanspaces.com;
    # 可选：给静态资源加缓存头，提升加载速度
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 原有的history模式配置，保持不变
  location / {
    root /var/www/myapp;
    try_files $uri $uri/ /index.html;
  }

  # SSL相关配置，保持不变
  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  include /etc/letsencrypt/options-ssl-nginx.conf;
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}

server {
  listen 80;
  listen [::]:80;
  server_name example.com www.example.com;
  return 301 https://$host$request_uri;
}

这样一来，Vue会把静态资源请求发到https://example.com/cdn/xxx.js，Nginx自动转发到CDN对应的文件，而路由的基础路径还是/，地址栏就不会出现CDN的URL了，history模式也能正常工作。

解决方案二：强制指定路由base路径（快速试错） #

如果你不想改publicPath的配置，可以直接在Vue路由里明确指定base为根路径，让路由忽略publicPath的影响：

在你的路由配置文件（比如src/router/index.js）里，修改路由初始化代码：

import { createRouter, createWebHistory } from 'vue-router';
import YourRoutes from './routes';

const router = createRouter({
  history: createWebHistory('/'), // 明确指定base为根路径，覆盖publicPath的影响
  routes: YourRoutes
});

export default router;

改完之后清除浏览器缓存，重新访问域名，应该就能看到地址栏恢复正常了。

额外注意事项 #

• 确保Nginx的location块顺序正确：代理CDN的/cdn/要放在/的前面，因为Nginx是按顺序匹配location规则的。
• 清除浏览器缓存：修改配置后一定要清缓存，不然旧的资源引用可能会导致问题。
• 检查路由守卫：如果你的项目里有全局路由守卫或者导航钩子，确认它们没有在初始化时做不必要的跳转，导致URL异常。

内容来源于stack exchange