vue @ ~ 相对路径 路径别名设置方式
@ ~ 相对路径 路径别名设置
- ./这是相对路径的意思,同级目录。
- ../上级目录。
- @/这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面设置了@具体指的是什么
在build/webpack.base.conf里找到如下
resolve: { extensions: ['.js', '.vue', '.json'],//取消后缀 引入文件路径就不用加文件后缀了 alias: { 'vue$': 'vue/dist/vue.esm.js', //引入vue '@': resolve('src'), 'asd': resolve('src/components/children'), //自己新建 要从src开始写文件路径 } },
使用 import heads from '@/components/children/heads'就不用频繁的使用./和../了,而是利用@直接定位到了src目录。
或者 import heads from 'asd/heads'
另外:在组件中,我们会引用一些静态文件,即static下的文件, 这时我们就不能用上面这些相对路径了的配置了,而必须使用一般的路径方式方式。
项目设置src相对路径为@
第一步 创建vue.config.js文件
第二步 添加代码
const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { devServer: {}, chainWebpack: (config) => { config.resolve.alias .set('@', resolve('src')), .set('@u', resolve('src/utils')), "@c": resolve("src/components"), "@v": resolve("src/pages"), "@s": resolve("src/static"), "@u": resolve("src/utils") } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
在vuex中有四大金刚分别是State, Mutations,Actions,Getters,本文对这四大金刚做了详细介绍,本文重点是给大家介绍vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用,感兴趣的朋友一起看看吧2018-04-04基于Vue + Axios实现全局Loading自动显示关闭效果
在vue项目中,我们通常会使用Axios来与后台进行数据交互,而当我们发起请求时,常常需要在页面上显示一个加载框(Loading),然后等数据返回后自动将其隐藏,本文介绍了基于Vue + Axios实现全局Loading自动显示关闭效果,需要的朋友可以参考下2024-03-03vue3使用vue-i18n的方法详解(ts中使用$t, vue3不用this)
所谓的vue-i18n国际化方案就是根据它的规则自己建立一套语言字典,对于每一个字(message)都有一个统一的标识符,下面这篇文章主要给大家介绍了关于vue3使用vue-i18n(ts中使用$t, vue3不用this)的相关资料,需要的朋友可以参考下2022-12-12vuex中store.commit和store.dispatch的区别及使用方法
这篇文章主要介绍了vuex中store.commit和store.dispatch的区别及使用方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01Vue使用babel-polyfill兼容IE解决白屏及语法报错问题
这篇文章主要介绍了Vue使用babel-polyfill兼容IE解决白屏及语法报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论