在vite项目中使用@进行文件的引入方式

 更新时间:2024年03月06日 10:48:27   作者:没有头发的战斗暴龙兽  
这篇文章主要介绍了在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';

总结

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

相关文章

  • vue2从template到render模板编译入口详解

    vue2从template到render模板编译入口详解

    这篇文章主要为大家介绍了vue2从template到render模板编译入口详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue-devtools安装使用全过程

    vue-devtools安装使用全过程

    这篇文章主要介绍了vue-devtools安装使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法例子

    当我们在开发应用时经常需要对表单进行校验,以确保用户输入的数据符合预期,这篇文章主要给大家介绍了关于前端Vue中常用rules校验规则(轮子)如电话身份证邮箱等校验方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue Echarts实现柱形图从右向左滚动效果

    Vue Echarts实现柱形图从右向左滚动效果

    这篇文章主要为大家详细介绍了Vue如何利用Echarts实现柱形图从右向左滚动的效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-05-05
  • vue3中的ref()详解

    vue3中的ref()详解

    ref对象可以通过.value属性进行修改,修改后的值也是响应式的,并且修改后会触发相关的副作用,这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下
    2023-05-05
  • 对vue 键盘回车事件的实例讲解

    对vue 键盘回车事件的实例讲解

    今天小编就为大家分享一篇对vue 键盘回车事件的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue使用NProgress进度条的方法

    Vue使用NProgress进度条的方法

    这篇文章主要为大家详细介绍了Vue使用NProgress进度条的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    Element UI 官网提供的树形控件包含基础的、可选择的、自定义节点内容的、带节点过滤的以及可拖拽节点的树形结构,本文实现了树形控件整合带图标的下拉菜单,感兴趣的可以了解一下
    2021-07-07
  • 新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    新版vue-cli模板下本地开发环境使用node服务器跨域的方法

    这篇文章主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue中import from的来源及省略后缀与加载文件夹问题

    Vue中import from的来源及省略后缀与加载文件夹问题

    这篇文章主要介绍了Vue中import from的来源--省略后缀与加载文件夹,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论