商城模板向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文件都访问成功,但样式却失效了。

阅读 2.2k
2 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题