vue3 js配置@符作为根路径的详细代码示例
更新时间：2025年05月20日 10:21:08 作者：凉笙Drunk
这篇文章主要介绍了vue3 js配置@符作为根路径的相关资料,通过示例代码介绍了如何通过配置jsconfig.json/tsconfig.json及构建工具（Vite/Webpack）设置别名,使@符号指向src目录,简化模块导入路径,提升代码可读性和维护性,需要的朋友可以参考下
1. 配置 jsconfig.json
如果你使用的是 JavaScript，可以在项目根目录下创建一个
jsconfig.json文件，并添加以下配置：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}2. 配置 tsconfig.json
如果你使用的是 TypeScript，可以在
tsconfig.json文件中添加以下配置：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}3. 配置 Vite
如果你使用的是 Vite 作为构建工具，你还需要在
vite.config.js或vite.config.ts中配置别名
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
});4. 配置 Webpack
如果你使用的是 Vue CLI 或 Webpack，你可以在
vue.config.js中配置别名：
const path = require('path');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}
};5. 使用 @ 符号导入模块
配置完成后，你可以在项目中这样导入模块：
import MyComponent from '@/components/MyComponent.vue';
这样，
@符号就会指向src目录，使得导入路径更加简洁和易读。
总结
通过配置
jsconfig.json或tsconfig.json文件，并在构建工具（如 Vite 或 Webpack）中设置别名，你可以轻松地将@符号配置为项目的根路径。这样可以简化模块导入路径，提高代码的可读性和维护性。
到此这篇关于vue3 js配置@符作为根路径的文章就介绍到这了,更多相关vue3 js配置@符作根路径内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决Antd 里面的select 选择框联动触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家介绍了vite插件打包更顺畅的使用技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue3.0安装Element ui及矢量图使用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-12-12
这篇文章主要介绍了vue mounted组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了Vue 重置data的数据为初始状态操作方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-03-03
本篇文章主要介绍了Vue2.0 实现单选互斥的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本篇文章主要介绍了Vue-Router进阶之滚动行为详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文介绍了如何在Vue中实现一个树形结构的下拉多选组件,支持任意一级选项的选择,全选功能,以及搜索功能,通过在mounted生命周期中获取数据,并使用handleTree函数将接口返回的数据整理成树形结构,实现了这一功能,感兴趣的朋友一起看看吧2025-01-01
一文带你深入理解Vue3中Composition API的使用
Composition API 是 Vue 3 中的一项强大功能,它改进了代码组织和重用,使得构建组件更加灵活和可维护,本文我们将深入探讨 Composition API 的各个方面,希望对大家有所帮助2023-10-10
这篇文章主要介绍了Vue中比较流行且好用的一些组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-08-08
最新评论