Vue配置动态路由后页面CSS样式与图片资源全部失效如何解决

• 1. 计算属性拼写错误：你代码里的commputed拼写错误，正确写法为computed，拼写错误会导致quiz数据无法正常计算返回，页面渲染异常的同时可能引发资源加载的连锁问题。
• 2. History模式静态资源路径问题：你使用了createWebHistory路由模式，如果你项目里全局引用CSS、图片时用的是相对路径（比如./assets/css/main.css、img/1.jpg这类写法），根路径/下的页面可以正常解析资源，但访问/quiz/:id二级路由时，浏览器会将相对路径拼接为/quiz/xxx去请求资源，导致资源路径错误、返回空内容或者404，这也是为什么只有动态路由页面出现问题。
• 3. 打包资源路径配置错误：如果没有配置正确的项目基础路径，懒加载组件对应的分包CSS、JS资源会被错误解析路径，导致加载到空CSS。

1. 修复计算属性拼写错误
   把QuizShow.vue里的错误拼写修正：

<script>
import sourceData from '@/data.json'

export default {
    // 修正computed拼写
    computed:{
        quizId(){
            return parseInt(this.$route.params.id)
        },
        quiz(){
            return sourceData.quizzes.find(quiz => quiz.id === this.quizId)
        }
    }
}
</script>

2. 修正所有静态资源引用路径
   全局资源（CSS、公共图片）统一使用绝对路径引用，路径开头加/：

• 引用public目录下的图片：写/1.jpg，不要写1.jpg或者./1.jpg
• 入口index.html中引用CSS：写<link rel="stylesheet" href="/css/main.css">，不要写./css/main.css

3. 配置项目基础路径
   如果是Vite项目，在vite.config.js中添加配置：

export default {
  base: '/'
}

如果是Vue CLI项目，在vue.config.js中添加配置：

module.exports = {
  publicPath: '/'
}

4. 部署适配（可选）
   如果项目部署到服务器后仍然出现该问题，给Nginx添加history路由适配规则：

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

内容的提问来源于stack exchange，提问作者Lara M.