在vite.config.js中配置 import{ defineConfig }from'vite'importvuefrom'@vitejs/plugin-vue'constpath =require('path')exportdefaultdefineConfig({resolve: {alias: {"@": path.resolve(__dirname,"./src/assets/js"), }, } }) 页面使用 importaxiosfrom'@/axios' 坑:引用.vue文件的时候记得写全后缀。
以下是基于不同构建工具(如vue-cli和Vite)配置路径别名的详细步骤: 一、使用vue-cli构建Vue 3项目 安装依赖: 通常vue-cli创建的项目已经包含了所有必要的依赖,无需额外安装。 找到并打开配置文件: 在项目根目录下找到并打开vue.config.js文件。 添加或修改路径别名的配置代码: javascript const { defineConfig...
在Vue 3中起别名的方法主要有两种:1、使用Vue CLI配置别名;2、使用Vite配置别名。这两个方法都能够有效地简化路径引用,使项目结构更加清晰。 一、使用Vue CLI配置别名 如果你的Vue 3项目是通过Vue CLI创建的,那么可以通过修改vue.config.js文件来配置别名。以下是具体步骤: 创建或修改vue.config.js文件: const p...
Vite+Vue3设置路径别名 // 1.vite.config.js文件添加importpathfrom'path'// 如果引入的时候报错则需要 npm install --save-dev @types/noderesolve: {alias: {'@': path.resolve(__dirname,'src') } },// 2. tsconfig.node.json 文件添加 设置导入规则{"compilerOptions": { ..."allowSyntheticDefault...
1. 项目安装Sass依赖包 2. 项目安装Path依赖包 3. 修改vite.config.js配置文件 additionalData处配置项目默认的全局Sass样式文件...
vue3+vite+js配置路径别名 1、让vscode认识@符号 项目下新建jsconfig.json,配置 baseUrl,paths 参数 {"compilerOptions": {"target": "esnext","useDefineForClassFields":true,"module": "esnext","moduleResolution": "node","strict":true,"jsx": "preserve","sourceMap":true,"resolveJsonModule":true...
使用import引入文件默认是“./……”上下层级多一些的时候难免就会出错,设置一个基础目录的别名就比较有用了。 在vite.config.ts中添加配置 // vite.config.ts// 导入path模块importpathfrom'path'// defineConfig添加以下内容resolve:{alias:{'@':path.resolve(__dirname,'src')}}// 例如import{defineConfig...
打开viteconfig.ts文件夹: importvuefrom'@vitejs/plugin-vue'import{UserConfig,ConfigEnv,loadEnv,defineConfig}from"vite";//配置路径别名importpathfrom"path";constpathSrc=path.resolve(__dirname,"src");//自动导入插件importAutoImportfrom"unplugin-auto-import/vite";importComponentsfrom"unplugin-vue-compo...
导入defineConfig 和 resolve 模块: 你需要从 Vite 库中导入 defineConfig 函数来定义你的配置对象,同时你也需要导入 resolve 工具来设置路径别名。 设置路径别名: 在 vite.config.js 中,你可以使用 alias 字段来指定路径别名。 1.2. 示例配置文件 以下是一个示例配置文件: ...