五-2、vue中引用文件路径问题

vue路径分为：

绝对路径、相对路径、~+路径及别名+路径

绝对路径：

（1）放在public文件夹下的内容，不会经过webpack打包处理，可以直接引用，

比如：aa.png直接放在public文件夹下，不管在哪个文件里，都可以这么引用

（2）通过别名引用

在js中，引入带别名的文件路径，不需要在别名前加~ ，在css或者style中引入的需要在路径前面加~，路径以 ~ 开头，其后的部分将会被看作模块依赖。这意味着你可以用该特性来引用一个 Node 依赖中的资源，~相当于reqiure。

在vue.config.js中定义了别名

chainWebpack: (config) => {

config.resolve.alias

.set('@', resolve('src')) //本项目路径src路径设置别名为@

.set('_conf', resolve('src/config')) //本项目路径src/config路径设置别名为_conf

.set('_iconfont', resolve('src/assets/icons/iconfont'))

.set('_css', resolve('src/assets/css/'))

.set('_img', resolve('src/assets/img/'))

.set('_js', resolve('src/assets/js/'))

.set('_components', resolve('src/components'))

.set('_header', 'src/Header')

.set('_footer', 'src/Footer')

}

在vue中引入js文件和css文件

注意在script中路径前面都没有~

<script>

import index from "_js/index.js"; ==src/assets/js/index.js

import "swiper/swiper.min.css"; ==node_modules/swiper/swiper.min.css

import "_js/vendor/swiper/swiper.min.css"; ==src/assets/js/vendor/swiper/swiper.min.css

</script>

注意style中使用别名的路径前面需要加~

<style scoped>

@import url(~_css/index.css); ==src/assets/css/index.css

</style>

相对路径：

引入相对路径，路径前面需要加require

在src/view/home/index.vue中引入src/assets/img/icon-cloud-light.png 正确写法：
<img  src="require(../../assets/img/icon-cloud-light.png)" />错误写法：
<img src="../../assets/img/icon-cloud-light.png" />原因：除了public文件夹下的内容，其余内容都会经过webpack处理，路径就变了，所以需要用require处理一下路径

~+路径及别名+路径

以下示例，通过别名引入文件

通过别名设置div的背景图片用reqiure，这样写可以
<div    class="thumbnail"v-bind:style=
"{backgroundImage:'url(' +require('_img/index/service-special-zone-bg-01.png') +')',}">用~，这样写不行：
<div     class="thumbnail"v-bind:style=
"{backgroundImage:'url(~_img/index/service-special-zone-bg-01.png)',}"
>

给div设置style样式，设置背景图片等属性<divclass="featurette":style="[{background:'url(' +require('_img/index/service-rate-bg.png') +' )  bottom center no-repeat',},{'background-size': 'auto 100%',},{'margin-bottom': '50px',},]"></div>

通过别名引入图片
<img src="~_img/index/icon-cloud-light.png" alt="" />

通过别名引入css<style scoped>@import url("~_css/index.css");
</style>

通过别名引入js<script>import index from "_js/index.js";
import Swiper from "swiper";
import "swiper/swiper.min.css"; //后跟的是swiper.css的相对路
import "_js/vendor/swiper/swiper.min.css";</script>

五-2、vue中引用文件路径问题相关推荐

vue中引入路径的用法
一.Vue文件中引用路径的介绍 1.路径 ./ ./当前文件同级目录 2.路径 -/ -/当前文件上一级目录 3.@符号 @ 的作用是在你引入模块时,可以使用 @ 代替 /src 目录,避免易错的相对 ...
Vue（五）Vue中的网络请求（使用Vue脚手架发送Axios请求）
一.Axios 1.定义:利用ES6提供的Promise方式,把AJAX进行了封装.我们在Vue中发送网络请求,基本上就是使用Axios 需要安装第三方的Axios模块,才能使用 ...
oracle 波浪号不识别,Vue中@import路径不能使用波浪号（~）吗？
Vue中类似这样引入css, @import '~abc/dist/abc.full.css' 编译会报错,Error:Fail to find '~abc/dist/abc.full.css' 用最 ...
【vue】vue中设置路径别名
前言转载:https://blog.csdn.net/panchang199266/article/details/90145638 在 CSS 或者 JS 中,有时候需要引入其他相关文件,若目录层 ...
ASP.NET 2.0中母版页中引用文件路径的问题（收集）
一直没去研究,终于受不了,找个解答: 模版页中难免要引用CSS.脚本.图片等,这些文件的路径如果简单的使用相对路径,那么如果引用模版的目录一发生变化,这些路径就会出错:如果使用绝对路径,又不够灵活,如 ...
vue中src路径的写法
1.src路径的第一种写法 ~/这个符号就是直接代表项目的根目录. 2.src路径的第二种写法 <div class="tag"><span class=&quo ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
设计模式在vue中的应用（五）
前言目录整理: 设计模式在vue中的应用(一) 设计模式在vue中的应用(二) 设计模式在vue中的应用(三) 设计模式在vue中的应用(四) 设计模式在vue中的应用(五) 设计模式在vue中的应 ...
Vue中import引入模块路径时的@符号
Vue中import引入模块路径时的@符号 1.ES6 模块主要有两个功能:export 和 import export:用户对外输出本模块(一个文件可以理解为一个模块,比如 aaa.js bbb.j ...

五-2、vue中引用文件路径问题

vue路径分为：

绝对路径：

相对路径：

~+路径及别名+路径

五-2、vue中引用文件路径问题相关推荐

最新文章

热门文章

五-2、vue中引用文件路径问题

vue路径分为：

绝对路径：

相对路径：

~+路径 及 别名+路径

五-2、vue中引用文件路径问题相关推荐

最新文章

热门文章

~+路径及别名+路径