Vue如何配置根目录@(引用路径)
更新时间：2022年04月19日 14:46:23 作者：reisaru
这篇文章主要介绍了Vue如何配置根目录@(引用路径)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在我们写vue项目中肯定会用到各种图片,那么如何更好的使用图片资源呢?下面这篇文章主要给大家介绍了关于vue中引入图片的方法,需要的朋友可以参考下2023-06-06
vue Router(v3.x) 路由传参的三种方式场景分析
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转，传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式，感兴趣的朋友跟随小编一起看看吧2023-07-07
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了Vue.delete()删除对象的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue CompositionAPI中watch和watchEffect的区别详解
这篇文章主要为大家详细介绍了Vue CompositionAPI中watch和watchEffect的区别，文中的示例代码简洁易懂，希望对大家学习Vue有一定的帮助2023-06-06
这篇文章主要介绍了vue2.x版详解computed和watch的使用，文章在基于vue框架的前端项目开发过程中，只要涉及到稍微复杂一点的业务，我们都会用到computed计算属性这个钩子函数，可以用于一些状态的结合处理和缓存的操作2022-07-07
对数字进行千分位分隔后展示应该是大部分同学都做过的功能了吧,常规的做法通常是编写一个工具函数来对数据进行转换,那么我们可不可以通过vue指令来实现这一功能呢,下面我们就来探索一下呢2024-02-02
handsontable是目前在前端界最接近excel的插件，可以执行编辑，复制粘贴，插入删除行列，排序等复杂操作，这篇文章主要介绍了hansontable在vue中的基本使用,需要的朋友可以参考下2022-10-10
本文主要介绍了Vue中的性能优化方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
最新评论