yykh
  • 2
  • 新人请关照

商城模板向vue迁移,样式失效

问题描述

本人纯小白,问题描述有可能不准确。过程是这样的:自网络下载商城前端模板,想将其迁移为.vue文件,迁移成功后发现商城样式失效了。

问题出现的环境背景及自己尝试过哪些方法

图片2.png
图为迁移后的代码
image.png
下载的模板在webstorm打开后,使用chrome打开效果如上。
image.png
迁移到.vue文件后样式失效。
图片3.png
这里用chrome调试窗口看到加载到的css好像为异常?
图片4.png
这里是部分网页html。

相关代码

迁移过程为:将静态资源复制到vue工程中。在component文件夹下创建.vue文件,直接复制模板文件到<template>中,只删除原有的<script>和将原有的<body>改为<div>。开启服务器后,打开网页可以发现css文件都访问成功,但样式却失效了。

阅读 512
评论 更新于 3月26日
    2 个回答
    yykh
    • 2
    • 新人请关照

    很感谢上面gristar的帮助。最终解决这个问题,问题出在拿不到css文件。
    解决过程如下:
    发现<link>内的地址是错的。所以将asset改为./assets,发现依旧不行。故改为从cdn而非从本地拿取css,结果成功拿取到css,格式也恢复正常。
    这里我又做了几次试验,发现有:
    .vue文件中只有在<style>标签中通过@import能够拿到本地css文件,而在<template>中直接通过<link>则只能拿到cdn的css,拿不到本地的。

    评论 赞赏 3月28日
      fly20
      • 55

      用 chrome 或者 firefox 浏览器,按 F12 打开控制台,看样式有没真的加载到,有没有报错。选中标签看样式有没有应用上

      评论 赞赏 3月26日
        撰写回答

        登录后参与交流、获取后续更新提醒