目录Vue如何配置根目录@Vue配置@作为src根路径Vue如何配置根目录@ 首先:@是在路径访问时使用的,为了减少层级引用。 @这是webpack设置的路径别名,默认指向src。
首先:@是在路径访问时使用的,为了减少层级引用。
@这是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$两个别名,如果需要,可以自己添加。
在跟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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue如何配置根目录@(引用路径)
本文链接: https://www.lsjlt.com/news/146515.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