vue结构目录菜鸟教程,vue的src下创建目录
Vue用@来表示src文件夹，这样导入时更方便找到文件路径。下面文章主要介绍vue配置根目录的相关信息(用@表示src目录)，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
目录
Vue中JS使用的根目录用法介绍，在Vue文件的CSS中使用vue cli3以及后续的配置步骤1:配置jsconfig.js步骤2:配置vue.config.jsvue cli2的配置摘要
简介
本文描述了vue如何配置根目录(src目录用@表示)。
默认情况下，不能用@代替/src。需要对其进行配置。
根目录的用法
在Vue中的JS里使用
Vue通常用@来表示项目的src目录。这样在输入路径的时候就不用输入/src了，直接用@
例如，有一个路径为：/src/layout/index.vue的vue文件，如下图所示：
如果直接导入，代码应该这样写：
从/src/layout 导入布局
如果用@代替，会更简洁：
从“@/layout”导入布局
在Vue文件的CSS里使用
它可以这样使用：
div class=login-center-left
H2 img src= @/assets/logo . png /{ { title } }/H2
/div
注意
不能用@来获取vue文件中样式的css中的路径。CSS loader会将非根路径的url解释为相对路径。
解决方案：添加~前缀(~ @表示根路径)。也就是说，添加~前缀会被解释为模块路径。
例如：
背景：rgb(73，123，199)URL( ~ @/assets/log in-BG . png )左侧居中
vue cli3及之后的配置
步骤1：配置jsconfig.js
位置：项目根目录/jsconfig.js
{
编译器选项:{
baseUrl“:”。/,
路径:{
@/*: [src/*]
}
},
//@不能用于以下目录中的文件
排除:[node_modules ， dist]
}
步骤2：配置vue.config.js
位置：项目根目录/vue.config.js
法1：配置chainWebpack
使用严格
const path=require(path )
const resolve=dir=path . join(_ _ dirname，dir)
模块.导出={
chainWebpack: config={
config.resolve .别名。set(@ )，resolve(src ))
}
}
法2：配置configureWebpack
使用严格
const path=require(path )
const resolve=dir=path . join(_ _ dirname，dir)
模块.导出={
configureWebpack: {
名称：“vue元素管理”，
解决：{
别名：{
@: resolve(src )
}
}
}
}
vue cli2的配置
webpack.base.conf(位置：项目根目录/config/webpack.base.conf)
解决：{
扩展名：[。js ，。vue ，。json]，
别名：{
vue$: vue/dist/vue.esm.js ，
@: resolve(src )，
#:resolve(statis )
}
}
总结
关于vue配置根目录(src目录用@表示)的这篇文章到此为止。关于vue配置根目录的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。