在vite项目中使用@进行文件的引入方式
作者：没有头发的战斗暴龙兽
这篇文章主要介绍了在vite项目中使用@进行文件的引入方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vite项目中使用@进行文件的引入
1.在vite.config.js中先引入path模块：
import path from 'path'
2.在vite.config.js写入如下配置：
resolve: {
alias: {
'@': path.resolve(__dirname, './src') // 为./src配置别名
}
}注意：
在vite项目中只有.js文件可以省略后缀， .vue文件不能省略
3.在项目根目录下创建jsconfig.json文件，并做如下配置：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"] // 将项目根目录配置别名为@
},
"allowSyntheticDefaultImports": true
},
"exclude": ["node_modules", "dist"]
}最后：
在vite.config.js中进行的配置是为了运行时不会进行报错，而在jsconfig.json中进行配置是为了能够有代码提示
vite中使用@，配置路径别名
报错
Cannot find module 'XXXXXX ’ or its corresponding type declarations
vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
const path = require('path');
export default defineConfig({
plugins: [vue()],
define: {
'process.env': {},
},
resolve: {
// 配置路径别名
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
tsconfig.json
配置baseUrl，paths
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
在文件中使用
import services from '@/services/index';
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。