Vue-cli项目history模式下刷新页面报Uncaught SyntaxError错误求助

嘿，这个问题我之前踩过一模一样的坑！本质是Vue的history模式需要服务器配合做路由 fallback 配置，我来给你一步步讲清楚：

为什么会出现这个错误？ #

你本地用vue-cli跑的时候没问题，是因为dev-server已经自动帮你处理了history模式的路由 fallback。但部署到服务器后就不一样了：

• 当你跳转页面后再刷新（比如访问/gift/list），服务器会把这个路径当成真实的文件路径去查找，但实际上/gift/list是前端路由，服务器上根本没有这个文件！
• 服务器找不到文件，就会返回默认的index.html（或者404页面），但浏览器会把返回的HTML内容当成JS文件去解析，自然就报Unexpected token <了——毕竟HTML的开头就是<嘛。

结合你的代码，你已经设置了base: '/gift'，所以配置服务器的时候要注意这个基础路径。

不同服务器的解决方案 #

1. Nginx（最常用） #

找到你的Nginx配置文件（通常在/etc/nginx/conf.d/或者/usr/local/nginx/conf/下），在对应的server块里添加以下配置：

location /gift {
  try_files $uri $uri/ /gift/index.html;
}

解释一下：

• try_files会依次尝试请求$uri（当前路径的文件）、$uri/（当前路径的目录），如果都找不到，就返回/gift/index.html，让Vue的前端路由接管这个请求。

配置完后记得重启Nginx：sudo nginx -s reload

2. Apache #

在你的项目部署目录下创建.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /gift/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /gift/index.html [L]
</IfModule>

注意：要确保Apache已经开启了mod_rewrite模块，不然这个配置不会生效。

3. Node.js Express服务器 #

如果用Node做后端，需要借助connect-history-api-fallback中间件：
首先安装依赖：

npm install connect-history-api-fallback --save

然后在你的server.js里配置：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

// 针对你的base路径配置fallback规则
app.use(history({
  rewrites: [
    { from: /^\/gift\/.*$/, to: '/gift/index.html' }
  ]
}));

// 托管静态文件（假设你的打包产物在dist目录）
app.use('/gift', express.static('dist'));

app.listen(3000, () => {
  console.log('服务器启动在3000端口');
});

额外检查点 #

看了你的index.html，静态资源用的是相对路径static/css/...，这个在base: '/gift'的配置下是没问题的，不用改。如果以后改成绝对路径的话，记得要写成/gift/static/...哦。

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