vue配置路径别名方式(@/*)

 更新时间:2025年11月03日 09:12:07   作者:A0曹小鱼吖  
文章介绍了如何配置路径别名,包括安装@types/node、编辑vite.config.ts或js文件、配置tsconfig.json以及重启软件等步骤

vue配置路径别名(@/*)

好几次配置路径别名有问题,要调好久。

直接把重点记录下来,防止踩坑。

1、安装 @types/node

npm i @types/node

2、编辑vite.config.ts(js)

引入path,设置路径,在Viteconfig中配置  resolve: { alias },

完整代码:

import { defineConfig, loadEnv, type ConfigEnv  } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import tailwindcss from '@tailwindcss/vite'
import { resolve } from 'path'

const pathResolve = (dir: string) => {
	return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {
	'@': pathResolve('./src'),
};

const viteConfig = defineConfig((mode: ConfigEnv) => {
  const env = loadEnv(mode.mode, process.cwd());
	// 判断是否开发环境
	const isDev = env.VITE_ENV === 'development';

  return {
    plugins: [
      vue(), 
      tailwindcss(),
	  AutoImport({
		imports: ['vue', 'vue-router', 'pinia'], // 自动导入的依赖库数组
		dts: true, // 生成自动导入类型定义文件
	  })
    ],

	resolve: { alias }, // 路径别名配置

    .....
  }
})

export default viteConfig;

3、配置 tsconfig.json

"baseUrl": "./",

"paths": {

      "@/*": ["src/*"]

},

完整代码:可根据自己项目相应更改配置

{
  "compilerOptions" : {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
    "isolatedModules": true,
    "strict": true,

    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"],
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,

    "experimentalDecorators": true,

    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"],
  "exclude": ["node_modules", "dist"]
}

4、如果配置完不生效的话

重启软件,例如,我用的是VSCode,那就全部关掉重新打开,刷新IDE缓存。

5、设置完成

可使用 @/ 匹配路径。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue Element前端应用开发之常规Element界面组件

    Vue Element前端应用开发之常规Element界面组件

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框、多文本框、下拉列表,以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等,本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用
    2021-05-05
  • 详解基于mpvue微信小程序下载远程图片到本地解决思路

    详解基于mpvue微信小程序下载远程图片到本地解决思路

    这篇文章主要介绍了详解基于mpvue微信小程序下载远程图片到本地解决思路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • vue3 自定义loading的操作方法

    vue3 自定义loading的操作方法

    这篇文章主要介绍了vue3 自定义loading的操作方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • Vue中的baseurl如何配置

    Vue中的baseurl如何配置

    这篇文章主要介绍了Vue中的baseurl如何配置问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Element input树型下拉框的实现代码

    Element input树型下拉框的实现代码

    这篇文章主要介绍了Element input树型下拉框的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue如何使用混合Mixins和插件开发详解

    Vue如何使用混合Mixins和插件开发详解

    这篇文章主要介绍了Vue如何使用混合Mixins和插件开发详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue源码入口文件分析(推荐)

    vue源码入口文件分析(推荐)

    这篇文章主要介绍了vue源码入口文件分析(推荐),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue仿微信app页面跳转动画效果

    Vue仿微信app页面跳转动画效果

    这篇文章主要介绍了Vue仿微信app页面跳转动画效果,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • 原生Vue 实现右键菜单组件功能

    原生Vue 实现右键菜单组件功能

    这篇文章主要介绍了Vue 原生实现右键菜单组件功能,本文给大家扩展知识点vue点击菜单以外区域,隐藏菜单操作,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-12-12
  • vue.js与后台数据交互的实例讲解

    vue.js与后台数据交互的实例讲解

    今天小编就为大家分享一篇vue.js与后台数据交互的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论