vue3+ts+vite 路径别名配置

找vite.config.js.ts文件,进行配置.路径别名如果是单个的话,alias后面写对象,多个的话写数组,里面再放对象.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: [{find: '@',replacement: path.resolve('./src')}]},base:'./',  //设置打包路径// server: {//     host: "localhost",//     port: 3000,//     https: true// },
})

如果使用typeScript编写的,还需要修改typeScript的配置,找到tsconfig.json文件,进行配置

{"compilerOptions": {"target": "ESNext","useDefineForClassFields": true,"module": "ESNext","moduleResolution": "Node","strict": true,"jsx": "preserve","sourceMap": true,"resolveJsonModule": true,"isolatedModules": true,"esModuleInterop": true,// 路径配置"baseUrl": ".","paths": {"@/*": ["src/*"]},"lib": ["ESNext","DOM"],"skipLibCheck": true,"types": ["element-plus/global"]},"include": ["src/**/*.ts","src/**/*.d.ts","src/**/*.tsx","src/**/*.vue"],"exclude": ["node_modules"],"references": [{"path": "./tsconfig.node.json"}]
}

如果是刚创建的typeScript项目,会出现报错提示"找不到模块path或相应的类型声明",所以需要安装@type/node

yarn add @type/node 或者
npm i @type/node

vue3+ts+vite 路径别名配置相关推荐

vue3+ts+vite后台管理模板
vue3+ts+vite后台管理模板支持前后端控制权限,使用uniapp+vue3+ts+elementplus+vite开发,码云地址:https://gitee.com/yongqiang062 ...
Vue3+TS+Vite无法使用require导入图片的解决方法
Vue3+TS+Vite无法使用require导入图片的解决方法问题描述, 当使用const xxx = require('xxx')浏览器会报错, 为啥使用vue-cli脚手架时不会出问题? 是因 ...
基于Vue3+TS+Vite+Cesium创建项目
基于Vue3+TS+Vite+Cesium创建项目基于Vite构建项目安装配置Cesium 创建Cesium三维视图运行结果随着近几年社会的发展,人们对三维可视化的需求也是越来越多,三维GIS ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
【Vue3+Ts+Vite】使用Vite与TS构建Vue3项目
Vue3+Ts+Vite
【vue3】vue3+ts+vite项目设置路径别名
解决流程 1.安装依赖 npm install @types/node -D 2.tsconfig.json配置 {"compilerOptions": {....."b ...
vue3 + vite + ts 设置 @ 路径别名
由于 vite 创建项目后,tsconfig.json 已配置好对应别名,因此只需单独配置 vite.config.ts 即可. 目前 tsconfig.json 中应已有如下代码 "pat ...
react+vite+ts关于路径别名的配置
1.配置路径别名第一步:找到vite.config.ts文件第二步:引入path 第三步:写入下图红框代码备注:本项目使用的是TS,因此需要下载安装关于node这个库的ts的声明配置 npm i ...
vue3+ts+vite 路由详解
安装 1.首先创建项目 npm init vite@latest 输入文件名,选择Vue.TypeScript 2.vscode打开项目,安装router,less,less-loader,@type ...

vue3+ts+vite 路径别名配置

vue3+ts+vite 路径别名配置相关推荐

最新文章

热门文章