Vue CLI打包成功无报错但Nginx访问显示空白页问题咨询

错误根因说明 #

你遇到的Uncaught SyntaxError: Unexpected token '<'报错本质是：浏览器请求.js/.css等静态资源时，Nginx未找到对应文件， fallback返回了index.html的HTML内容，浏览器将HTML文本当做JS解析，识别到首字符<不符合JS语法就抛出错误。

修复步骤 #

1. 修正Nginx配置

你当前配置的try_files写法不符合单页应用路由规则，冗余的=404会打断资源 fallback 逻辑，且location块重复定义root可以直接继承server块配置，修改后的配置如下：

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /home/ubuntu/apps/client/vue-crm/dist;
  index index.html index.htm;

  server_name _;
 
  location / {
    try_files $uri $uri/ /index.html;
  }
}

修改完成后执行sudo nginx -s reload重载配置，清空浏览器缓存后重新访问测试。

2. 检查Vue打包配置（若修改Nginx后问题仍存在）

打开项目根目录的vue.config.js文件，确认publicPath配置匹配部署路径：

• 部署在域名根路径（直接用IP访问无子路径）：publicPath设为'/'
• 部署在子路径（如http://xxx.com/crm/）：publicPath设为'/crm/'
  示例配置：

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: '/', // 根路径部署用该值
  // 其他配置项
})

修改后重新执行npm run build打包，将新的dist产物上传到服务器对应路径再测试。

3. 权限排查（可选）

若以上两步操作后仍未解决，执行以下命令给静态资源开读取权限：

sudo chmod -R 755 /home/ubuntu/apps/client/vue-crm/dist

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