Nuxt静态资源本地可访问但生产环境无法加载，求原因

我来帮你排查下这个问题，生产环境static文件夹里的demos子目录无法访问，通常是这几个常见原因，一个个来拆解：

1. 路径引用的基础URL差异 #

本地开发时，Nuxt默认的基础URL是根路径/，所以你直接用/demos/xxx这种绝对路径引用文件完全没问题。但如果生产环境是部署在子路径下（比如https://your-domain.com/nuxt-app/），直接用根路径就会指向域名根目录，自然找不到你的demos文件夹。

解决办法：

• 用Nuxt内置的$static辅助方法来生成正确的路径，在组件模板里可以这么写：

  <a :href="$static('/demos/test.html')">打开Demo</a>
  

  在脚本里则用this.$static('/demos/test.html')。
• 如果确定生产环境的固定子路径，也可以在nuxt.config.js里配置router.base：

  router: {
    base: '/nuxt-app/',
    middleware: 'auth'
  }
  

  这样所有绝对路径都会自动加上这个前缀，匹配部署的子路径。

2. 部署时static文件夹未被完整上传 #

有些部署脚本或者平台可能会误把static文件夹排除在外，导致生产服务器上根本没有demos目录的内容。

解决办法：

• 检查你的部署流程：比如用CI/CD工具的话，确认构建脚本里包含了static目录的复制；如果是手动上传，确保把整个static文件夹都传到服务器的dist目录下（Nuxt构建后会把static内容复制到dist里）。
• 登录服务器查看dist/static目录，确认demos子文件夹和里面的文件都存在。

3. 服务器的静态文件托管配置错误 #

如果用Nginx、Apache这类服务器托管Nuxt应用，需要确保服务器配置正确识别静态文件的请求，优先返回static里的内容，而不是走Nuxt的路由。

以Nginx为例，正确的配置应该包含：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/nuxt/dist;

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

这个配置会让Nginx先尝试找请求对应的静态文件（比如/demos/test.html），找不到再转发给Nuxt的index.html处理路由。如果你的配置里缺少try_files或者路径指向错误，就会导致静态文件无法访问。

4. 浏览器或CDN的缓存问题 #

有时候生产环境的CDN或者浏览器缓存了旧的资源映射，导致新上传的demos文件夹内容无法被获取。

解决办法：

• 强制刷新浏览器缓存（Ctrl+Shift+R），或者用隐私模式访问测试。
• 如果用了CDN，登录CDN后台清除对应路径的缓存；也可以给static里的文件添加版本号（比如把demos改成demos/v1），避免缓存冲突。

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