目录@ ~ 相对路径 路径别名设置项目设置src相对路径为@第一步 创建Vue.config.js文件第二步 添加代码@ ~ 相对路径 路径别名设置 ./这是相对路径的意思,同级目录
在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下的文件, 这时我们就不能用上面这些相对路径了的配置了,而必须使用一般的路径方式方式。
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")
}
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue@~相对路径路径别名设置方式
本文链接: https://www.lsjlt.com/news/150534.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0