在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';

总结

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

相关文章

  • vue路由切换时取消之前的所有请求操作

    vue路由切换时取消之前的所有请求操作

    这篇文章主要介绍了vue路由切换时取消之前的所有请求操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue3响应式对象的api超全实例详解

    vue3响应式对象的api超全实例详解

    可以把数据变成响应式api的方法叫做响应式api,下面这篇文章主要给大家介绍了关于vue3响应式对象api的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Nuxt引用cookie-universal-nuxt在服务端请求cookie方式

    Nuxt引用cookie-universal-nuxt在服务端请求cookie方式

    这篇文章主要介绍了Nuxt引用cookie-universal-nuxt在服务端请求cookie方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

    这篇文章主要介绍了解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue如何指定不编译的文件夹和favicon.ico

    Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue v-on传递参数和事件修饰符的使用

    vue v-on传递参数和事件修饰符的使用

    本文主要介绍了vue v-on传递参数和事件修饰符的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • vue + element-ui实现简洁的导入导出功能

    vue + element-ui实现简洁的导入导出功能

    Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI,下面这篇文章主要给大家介绍了关于利用vue + element-ui如何实现简洁的导入导出功能的相关资料,需要的朋友可以参考下。
    2017-12-12
  • vue的组件通讯方法总结大全

    vue的组件通讯方法总结大全

    这篇文章主要为大家介绍了非常全面vue的组件通讯方法总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    vue项目打包解决静态资源无法加载和路由加载无效(404)问题

    这篇文章主要介绍了vue项目打包,解决静态资源无法加载和路由加载无效(404)问题,静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,本文给大家介绍的非常详细,需要的朋友跟随小编一起看看吧
    2023-10-10
  • Vue.js实现图片切换功能

    Vue.js实现图片切换功能

    这篇文章主要为大家详细介绍了Vue.js实现图片切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论