在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';
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子
当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下2023-12-12Element树形控件整合带图标的下拉菜单(tree+dropdown+input)
Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构,本文实现了树形控件整合带图标的下拉菜单,感兴趣的可以了解一下2021-07-07新版vue-cli模板下本地开发环境使用node服务器跨域的方法
这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04Vue中import from的来源及省略后缀与加载文件夹问题
这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
最新评论