当前位置: 代码网 > it编程>前端脚本>Vue.js > vue中静态文件引用的注意事项及说明

vue中静态文件引用的注意事项及说明

2024年05月26日 Vue.js 我要评论
一、assets文件夹与static文件夹的区别区别一:assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了区别二:assets中的文件在vu

一、assets文件夹与static文件夹的区别

区别一:

  • assets文件是src下的,所以最后运行时需要进行打包,而static文件不需要打包就直接放在最终的文件中了

区别二:

  • assets中的文件在vue中的template/style下用../这种相对路径的形式进行引用,在script下必须用@import的方式引入
  • 而static下的文件在.vue中的任何地方都只要使用../这种相对路径的方式引入

总结一下:

  • 1.assets用来放置样式、静态图片,只要src下面的组件中用到的资源就放在assets中。
  • 2.static用来放没有npm包的第三方插件,字体文件。
  • 3.assets与components同级 components下的.vue引用静态文件时,相对路径为 ../assets/wapfront

4.assets与app.vue同级 相对路径为 ./assets/wapfront

二、vue如何引入其它静态文件

1.src目录下的资源只能import或require。

2.想静态引入的话,建立一个与src同级的目录例如static,然后把静态资源放入该文件夹下,html的引入路径如下:./static/...

注:试过一定要放在static文件夹下,否则报错

三、vue如何引入sass

npm i sass --save-dev 装下它

npm i sass-loader --save-dev 再装下它

在webpack.base.config配置文件里加上这段

{
  test: /\.scss$/,
  loader: 'style!css!sass'
},

在组件文件.vue里直接引入scss样式

<style lang="scss">
  .hello input {
  color: red;
}
</style>

四、vue报错cannot get

1.你init vue-cli的时候,有个选项问你是否需要eslint可以选择不需要,因为它是检验的,可以不用,如果用它格式写的不规范启不来页面

2.如果已经安装eslint,将下图所示部分注释掉,eslint对空格要求比较严格

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com