vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到 webpack.base.conf.js 文件,在里面修改 resolve.alias 即可。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
但是vue-cli 3.0 创建项目时,目录结构精简化,找不到 build 和 config 文件夹,那么该如何修改路径别名呢?
只需要在项目根目录下,新建vue.config.js文件,代码如下:
const path = require('path');//引入path模块
function resolve(dir){
return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
//set第一个参数:设置的别名,第二个参数:设置的路径
.set('@',resolve('./src'))
.set('components',resolve('./src/components'))
.set('assets',resolve('./src/assets'))
.set('views',resolve('./src/views'))
.set('network',resolve('./src/network'))
//注意 store 和 router 没必要配置
}
}
配置好想用的路径别名后,重新启动项目,再引入文件时,使用别名即可 配置路径前:
import my from "../views/my/My.vue";
配置路径后(不用再担心文件层级关系):
import my from "views/my/My.vue";
注意,引用别名时如果是html中的路径,则需要在别名前面加符号~
<img src="~assets/img/tabbar/home.svg" alt="" slot="item-icon">
在做Vue项目的时候,由于项目需求,需要动态绑定img的src时,突然发现如果说是直接请求后台接口的图片地址就能显示,但是直接动态绑定img的src的图片的相对路径或者是绝对路径的时候,图片不能显示。
html代码:
<img :src="MyimgSrc" alt="">
js代码:
this.MyimgSrc = 'assets/jd/market/img/temp/icon_yj.png'
/* 或者 this.MyimgSrc = '~assets/jd/market/img/temp/icon_yj.png'*/
解决方法:
当在给数据MyimgSrc 设置绝对路径或者是相对路径时应该使用require引入才能成功
this. MyimgSrc = require('assets/jd/market/img/temp/icon_yj.png')
注意:当图片通过require 引入时,路径前面不能加@ 或者 ~
在前端学习过程中,涉及到路径的问题非常多,相对路径,绝对路径等。有时候明明觉得没问题,但是还是会出错。或者说线下没问题,但是到了线上就出现问题,因此弄懂路径问题,非常关键
html中的路径:指文件存放的位置,在网页中利用路径可以引用文件,完成:插入图像、视频等功能。表示在html中路径的使用方式有两种:相对路径,绝对路径。
调度系统的任务可视化界面需要完成用户可在界面上连线作为任意两个job间的依赖关系,也就是DAG图DAG也就是有向无环图,有向无环图指的是一个无回路的有向图。环是一条至少含有一条边且起点和终点相同的路径。
webpack 前端打包工具, 开发人员要面对的路径主要是: 打包前的路径(开发环境路径)和打包后的路径(生产环境路径),在webpack.config.js中配置的output.path, output.publicPath, 以及各种插件, loader中的outputPath, publicPath
所谓相对路径,就是相对于自己的目标文件位置。那么在HTML中如何写相对路径呢?相对路径的几种写法:1、如果是在同一目录下,有两个文件A.html和B.html:
绝对路径指的是文件的真正路径,使用绝对路径链接外部资源,如:图片、超级链接、flash、音频、视频等等。使用绝对路径必须输入完整的描述路径,这种方法指向的链接目标地址清晰明确
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!