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

更新时间：2024年04月27日 12:05:12 作者：呗儿

这篇文章主要介绍了vue中静态文件引用的注意事项及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、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对空格要求比较严格

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue中使用better-scroll实现滑动效果及注意事项
这篇文章主要介绍了vue中使用better-scroll实现滑动效果，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Element-ui中元素滚动时el-option超出元素区域的问题
这篇文章主要介绍了Element-ui中元素滚动时el-option超出元素区域的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
如何启动一个Vue.js项目
这篇文章主要介绍了如何启动一个Vue.js项目，对Vue.js感兴趣的同学，可以参考下
2021-04-04
Vue生成随机卡密并绑定到表单输入框的实现技巧
在现代Web应用中,随机生成验证码、卡密等是一项常见需求,对于开发人员来说,如何在表单中快速生成一个符合格式的随机卡密,并与其他表单字段一同提交,是一个常见的场景,本篇文章将详细介绍如何在Vue.js框架中实现一个随机卡密生成功能,需要的朋友可以参考下
2024-11-11
vue遮罩层如何阻止滚动
这篇文章主要介绍了vue遮罩层如何阻止滚动，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
如何解决this.$refs.form.validate()不执行的问题
这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue中appear的用法
这篇文章主要介绍了vue中appear的用法,需要的朋友可以参考下
2017-08-08
如何去掉el-table中自带的边框线
文章介绍了如何去掉Element UI中el-table组件自带的边框线,通常情况下,el-table没有添加border属性,但仍然会出现边框线,可能的原因包括ElementUI的默认样式或表格的某些内置样式,感兴趣的朋友跟随小编一起看看吧
2025-01-01
详解Vue前端对axios的封装和使用
这篇文章主要介绍了Vue前端对axios的封装和使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
element 穿梭框性能优化的实现
本文主要介绍了element 穿梭框性能优化，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10