vue中如何配置根目录,根目录的用法是什么
Admin 2022-08-10 群英技术资讯 1506 次浏览
本文介绍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') } }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要介绍了vue使用watch监听器的基本使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
作为原型和原型链的基础,先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。本篇文章带大家详细了解一下JavaScript中的构造函数,介绍一下怎么利用构造函数创建一个js对象,希望对大家有所帮助!
目录1. 自定义组件官方文档1.1 创建自定义组件1.1.1 声明组件1.1.2 编辑组件1.2 使用自定义组件1.3 页面向自定义组件传递数据(父传子)1.4 组件将事件传给页面(子传父)1. 自定义组件小程序允许我们使用自定义组件的方式来构建页面。官方文档自定义组件是不是用的微信的组件感觉很爽啊,如果不够用怎么办?
利用nodejs实现:逐行读写(从一个文件逐行复制到另外一个文件);逐行读取、处理和写入(读取一行,处理后,写入另一个文件)1.所需要的模块:fs,os,readline2.具体实现:a.功能的实现:readWriteFileByLine.jsvarfs=require('fs-extra');varos=require('os');varrl=requir
这篇文章主要介绍了Vue3 编写自定义指令插件的示例代码,主要包括编写自定义插件,在 main.ts 中加载启用插件的代码介绍,对Vue3自定义指令插件相关知识感兴趣的朋友一起看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008