目录简介根目录的用法在Vue中的js里使用在Vue文件的CSS里使用vue cli3及之后的配置步骤1:配置jsconfig.js步骤2:配置vue.config.jsvue cli
本文介绍vue如何配置根目录(用@代表src目录)。
默认情况下是不能用@代替/src的,需要经过配置才可以。
vue通常会用@来代表项目的src目录。这样一来,输入路径时就不用输入/src了,可以直接用@来替换。
例如:有一个vue文件,路径为:/src/layout/index.vue,如下图所示:
如果直接导入,则代码应该这么写:
import Layout from '/src/layout'
如果使用@来替换,就更简洁了:
import Layout from '@/layout'
可以这样使用:
<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
位置:项目根目录/jsconfig.js
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
// @ 不能在以下目录的文件中使用
"exclude": ["node_modules", "dist"]
}
位置:项目根目录/vue.config.js
法1:配置chainWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
chainwebpack: config => {
config.resolve.alias
.set('@', resolve('src'))
}
}
法2:配置configureWebpack
'use strict'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
configureWEBpack: {
name: 'vue Element Admin',
resolve: {
alias: {
'@': resolve('src')
}
}
}
}
webpack.base.conf(位置:项目根目录/config/webpack.base.conf)
resolve: {
extensions: ['.js', '.vue', '.JSON'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'#':resolve('statis')
}
}
到此这篇关于vue配置根目录(用@代表src目录)的文章就介绍到这了,更多相关vue配置根目录内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue配置根目录详细步骤(用@代表src目录)
本文链接: https://www.lsjlt.com/news/153989.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