常常会在vue项目中看到这样的情形:
@import '../../../../assets/css/varibles.scss'
其实可以简写为以下形式:
@import '~@/assets/css/varibles.scss'
这里的~符号。表示后面的值为 alias。
WebPack:
使用webpack的可以查看
build/webpack.base.conf.js,系统会自动到 alias
配置中找相应的值, 然后拼接成最后的地址
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}
当然我们也可以在 build/webpack.base.conf.js 的 alias
配置自定义字符,比如:scss
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'scss': resolve('src/assets/css'),
}
}
然后使用:
在 main.js 或者其他组件都可以使用
@import '~scss/varibles.scss'
VITE:
使用vite的,也可以到vite的配置文件(vite.config.js)里查看
resolve:{
alias:{
"~":path.resolve(__dirname, "src")
}
},
可以看到 ~代表项目主目录下的src子目录
import { succ_toast } from '~/composables/util'
就表示到 项目主目录下的src子目录 下的 composables目录 的util文件中(或者util/index文件中)导入 succ_toast 函数