Vue如何配置根目录@(引用路径)
作者:reisaru 时间:2024-04-28 09:28:32
Vue如何配置根目录@
首先:@是在路径访问时使用的,为了减少层级引用。
@这是webpack设置的路径别名,默认指向src。
旧版本在build/webpack.base.conf这个文件里面定义。
新版本在根目录下创建在vue.config.js定义。
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
baseUrl: './',
runtimeCompiler: true,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
}
}
vue项目中默认定义了@(最常用)和vue$两个别名,如果需要,可以自己添加。
Vue配置@作为src根路径
在跟src同级的根路径下找到vue.config.js中作如下配置:
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
const name = '学生信息管理系统' // page title
module.exports = {
publicPath: '/',
outputDir: 'dist',
assetsDir: 'static',
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
name: name,
resolve: {
alias: {
// 设置@/的意义
'@': resolve('src')
}
}
}
}
注意vue.config.js是vue-cli3的一个配置文件,新建的项目可能不会有这个文件,需要手动创建。
配置完成之后,就可以在vue中使用@作为src的根路径配置,如下:
<div class="login-center-left">
<h2><img src="@/assets/logo.png" />{{ title }}</h2>
</div>
注意在vue文件,style的css中不能使用@来获取路径,CSS loader 会把把非根路径的url解释为相对路径, 加~前缀才会解释成模块路径(~@代表根路径),例如:
background: rgb(73, 123, 199) url("~@/assets/login-bg.png") left center
来源:https://blog.csdn.net/qq_41337100/article/details/119637636
标签:Vue,配置,根目录,@
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python特征降维知识点总结
2022-07-12 11:17:42
使用Python实现一个栈判断括号是否平衡
2022-01-04 02:20:29
Python办公自动化批量处理文件实现示例
2021-01-12 01:11:24
![](https://img.aspxhome.com/file/2023/6/112096_0s.png)
python中list循环语句用法实例
2022-09-12 15:08:05
Python实现语音合成功能详解
2023-11-28 16:09:17
![](https://img.aspxhome.com/file/2023/9/87999_0s.jpg)
Python 创建TCP服务器的方法
2022-04-17 08:17:50
Django使用Mysql数据库已经存在的数据表方法
2023-07-21 15:24:59
Python实现的json文件读取及中文乱码显示问题解决方法
2022-05-18 16:41:15
五个基于JS实现的炫酷登录页面
2024-04-17 09:43:25
![](https://img.aspxhome.com/file/2023/7/136767_0s.gif)
bootstrap flask登录页面编写实例
2024-04-16 08:49:19
![](https://img.aspxhome.com/file/2023/1/137011_0s.jpg)
Python中的if判断语句中包含or问题
2021-12-03 14:30:21
![](https://img.aspxhome.com/file/2023/9/110219_0s.png)
PHP session反序列化漏洞深入探究
2023-05-30 04:53:04
![](https://img.aspxhome.com/file/2023/7/55367_0s.png)
python抽象基类用法实例分析
2021-03-04 11:06:25
Golang实现文件传输功能
2023-08-05 13:50:31
![](https://img.aspxhome.com/file/2023/8/90478_0s.jpg)
PHP页面中文乱码分析
2024-05-13 09:23:19
sql server关键字详解大全(图文)
2024-01-14 09:43:13
![](https://img.aspxhome.com/file/2023/0/110980_0s.png)
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2021-09-15 16:28:22
轻松掌握python设计模式之访问者模式
2023-06-30 13:46:39
![](https://img.aspxhome.com/file/2023/1/97101_0s.jpg)
Python将8位的图片转为24位的图片实现方法
2021-07-31 12:11:42
![](https://img.aspxhome.com/file/2023/3/121703_0s.jpg)
详解MySQL 重做日志(redo log)与回滚日志(undo logo)
2024-01-29 13:51:01