vue import 导入优化

最新推荐文章于 2025-10-20 17:19:21 发布

原创最新推荐文章于 2025-10-20 17:19:21 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue项目中如何创建并配置jsconfig.json文件，以实现`@`符号的导入路径映射。通过配置`baseUrl`和`paths`，将原本的相对路径` '../../api/api' `改为` '@/api/api' `，简化了模块导入方式，提高了代码可读性和维护性。

在vue项目中新建 jsconfig.json
文件配置

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

文件中导入改变
由原来的

import instance, {baseUrl} from '../../api/api';

改成

import instance, {baseUrl} from '@/api/api';

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MC_Hello

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

首屏优化之：import 动态导入

chenyajundd的博客

08-09

853

在进行首屏优化时，可以采取动态导入的方式实现，使用 import('./文件路径')实现，虽然动态导入有一些优化首屏渲染的优势，但是也有一些缺点，比如首次加载延迟，不利于 SEO 优化等，所以在使用动态导入时应该好好进行规划，比如一些不常用的模块或者内容不太复杂，对加载速度无要求的文件可以进行动态导入，这个还是要根据项目的需求来进行使用的。

Vue.js import使用方法

02-14

2433

import 是 JavaScript 模块系统的重要部分，Vue.js 中也广泛使用 import 来加载组件、工具函数、第三方库等。在 Vue.js 的开发中，理解和正确使用 import 是非常重要的，它能帮助我们更好地管理代码和模块。

参与评论您还未登录，请先登录后发表或查看评论

PyCharm Optimizing Imports (优化导入)

程永强

12-09

8697

PyCharm Optimizing Imports (优化导入)

vue 之 import 的语法

最新发布

牛牛博士博客

10-20

857

vue 之 import 的语法

Vue几种import用法

kun_931013的博客

01-24

1万+

转载地址：https://www.jianshu.com/p/784e51ec68ce vue 各种 import 引入 1 引入第三方插件 import echarts from 'echarts' 2 引入工具类第一种是引入单个方法 import {axiosfetch} from ‘./util’; 下面是写法，需要export导出 export function axiosfetch...

Vue中import篇：模块、JS文件、class类文件、数组对象文件、第三方、样式等方式集合

happy81997的博客

12-23

1万+

目录一、引入第三方插件二、引入函数方法 2.1 单个函数引入 2.1.1 JS中export函数 2.1.2 JS中export default函数 2.2 多个函数引入 2.3 成组全部引入三、引入数组、对象JS文件四、引入class类js文件五、引入CSS文件 vue中经常需要import各种文件，比如样式、组件、方法、js文件、模块等，具体每种如何使用。一...

Vue之import

08-14

881

经常看到vue的代码里面有import，这里把几种情况总结一下。 case1：如果使用export default 导出的对象，在import的时候，可以任意命名。 <template> <div> <label>cat</label> <label>cat</label> ...

Vue export import 导入导出的多种方式与区别介绍

10-15

- **部分导出和部分导入** 适用于资源较大的情况，有助于优化性能，减少加载时间。 - **全部导出和全部导入** 更方便于模块的使用者，但可能导致不必要的资源加载，尤其是在大型项目中。在实际开发中，根据项目的...

精选资源

vite5+vue3+ import.meta.glob动态导入vue组件

03-25

在现代前端开发中，Vue3 和 Vite5 的结合提供了高效、快速的开发体验...总之，`import.meta.glob` 结合 Vue3 和 Vite5，提供了强大的动态导入 Vue 组件的能力，简化了代码管理，提高了开发效率，并有助于优化应用性能。

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

10-15

在Vue开发中，`import` 语句是ES6模块导入...理解 `import` 语句的工作原理以及Vue的加载策略，能更好地优化项目结构，提高开发效率，并避免潜在的导入错误。总之，掌握这些细节对于成为一名优秀的Vue开发者至关重要。

精选资源

vite vue3 import.meta.glob动态路由

03-29

1. **代码分割**：由于Vite对ES模块的支持，动态导入能帮助我们实现按需加载，只在实际需要时才加载特定的路由组件，从而优化了应用的初始加载时间。 2. **易于维护**：当添加、删除或修改路由时，不再需要手动更新...

解决vue的router组件component在import时不能使用变量问题

10-15

本文将深入探讨如何解决Vue Router中的组件动态导入问题，特别是关于在`import`语句中使用变量的问题。首先，我们需要理解`import`语句的基本规则。在ES6中，静态导入如`import MyComponent from './MyComponent....

解决在vue文件写过多的import来导入模块

freddy的博客

04-04

647

在我们平时开发的过程，难免会使用其他目录下的模块文件，这个时候，我们就会使用ES6的import来帮助我们导入当前文件需要使用的函数和文件，但是在开发每个页面，如果我们都需要写import来一个一个引进所需是不是做了大量无用的重复工作，那我们有么有其他更好的办法来帮助我们一次性导入，不必要在每个页面都手动引用。

pyhton如何导入包的每一个文件_Vue性能优化：如何实现延迟加载和代码拆分？

weixin_39934085的博客

11-21

104

作者｜Filip Rakowski译者｜薛命灯移动优先方法已经成为一种标准，但不确定的网络条件导致应用程序快速加载变得越来越困难。在本系列文章中，我将深入探讨我们在 Storefront 应用程序中所使用的 Vue 性能优化技术，你们也可以在自己的 Vue 应用程序中使用它们来实现快速加载。Storefront 应用程序：https://github.com/DivanteLtd/vue-stor...

vue优化技巧

weixin_40300870的博客

10-26

1256

vue性能优化

关于前端优化中的@import

weixin_34072159的博客

09-04

677

2019独角兽企业重金招聘Python工程师标准>>> ...

import在vue中使用

不畏惧被人讨厌而是勇往直前，不随波逐流而是激流勇进，这才是对人而言的自由。

06-28

1万+

vue中使用Import导入的方法

VUE-如何解决繁琐的import导入组件

sssdal19995的博客

07-18

1287

vue 中一个组件需要使用另外一个组件的时候，需要先Import，这个过程既重复又啰嗦，比如框架的一些组件，所有页面都可能会用到，那我们为什么不将他们统一挂载到vue中呢。统一挂载框架组件首先在框架文件夹同级建立一个Index.js文件 // 导入Vue, 需要使用Vue.component()方法注册组件 import Vue from 'vue' const requireComponents = require.context('./', true, /\.vue/); // 遍历出每个组件的

Vue中import用法

热门推荐

顺其自然~专栏

03-30

2万+

1. 引入第三方插件第三方常用插件参考Vue.js(九) 第三方常用插件_vbirdbest的博客-优快云博客_vue插件 2. 导入 css 文件 import 'iview/dist/styles/iview.css'; 如果是在.vue文件中导入，那么是在vue组件的style里面导入，且import前面需要加@符号 <style> 　　@import 'iview/dist/styles/iview.css'; </style> 3. 导入 js 文件

vite + vue3 import 导入不需要index.vue

08-14

<think>我们正在使用Vite和Vue 3，并且希望导入组件时能够省略index.vue扩展名。在Vite中，我们可以通过配置`resolve.extensions`来设置自动解析的扩展名。默认情况下，Vite已经包含了一些常见的扩展名，如`.vue`、`.js`等。但是，我们还需要考虑目录下的index文件。我们的目标：当我们导入一个目录时，能够自动解析到该目录下的index.vue文件（而不需要写全路径）。例如，假设有一个组件位于`src/components/MyComponent/index.vue`，我们希望这样导入： import MyComponent from '@/components/MyComponent' 而不是： import MyComponent from '@/components/MyComponent/index.vue' 为了实现这一点，我们需要确保两件事： 1. Vite能够解析目录并自动查找index文件（index.vue等）。 2. 在导入路径中省略index.vue后，Vite能够正确解析。实际上，Vite默认已经支持解析index文件，因为它的`resolve.mainFiles`默认是`['index']`（参考Node.js规范）。同时，Vite的`resolve.extensions`默认包含`.vue`。所以，在大多数情况下，我们不需要额外配置就可以实现。但是，为了确保万无一失，我们可以检查一下Vite的配置。如果我们需要自定义，可以在`vite.config.js`中配置`resolve.extensions`和`resolve.mainFiles`（虽然通常不需要修改mainFiles）。然而，有时候我们可能会遇到问题，比如当我们导入一个目录时，Vite可能默认解析到目录下的index.js而不是index.vue。为了避免这种情况，我们可以调整`resolve.extensions`的顺序，让`.vue`优先于`.js`。具体步骤如下： 1. 打开项目根目录下的`vite.config.js`（如果没有，则创建一个）。 2. 在配置中添加`resolve`选项，设置`extensions`（如果需要调整顺序）和`mainFiles`（一般不需要改，除非有特殊需求）。默认的Vite配置中，`resolve.extensions`是`['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']`。注意，这个顺序意味着当目录下同时有`index.js`和`index.vue`时，会优先匹配到`index.js`（因为.js在.vue前面）。所以，如果我们希望优先匹配.vue文件，我们可以将.vue放在前面。示例配置： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { // 设置默认的扩展名，注意顺序：先.vue，然后是.js等 extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 如果你需要修改主文件，可以设置mainFiles，但通常默认就是['index'] // mainFiles: ['index'] } }) ``` 这样配置后，当我们导入一个目录时，Vite会先尝试查找该目录下的index.vue，然后才是index.js等。另外，我们还需要注意：在Vue单文件组件中，我们通常使用`@`作为别名指向`src`目录。这个别名在Vite中默认可能没有配置，需要手动配置。在`vite.config.js`中，我们可以通过`resolve.alias`来设置别名： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], alias: { '@': path.resolve(__dirname, './src') } } }) ``` 这样，我们就可以使用`@/components/MyComponent`来导入组件了。注意：以上配置需要安装`path`模块，它是Node.js内置模块，不需要额外安装，但在配置文件中使用需要先导入（`import path from 'path'`）。同时，确保你的项目是使用ES模块的，可以在`package.json`中设置`"type": "module"`，或者在`vite.config.js`中使用CommonJS语法（如`require`）来避免ES模块导入问题。不过Vite的配置文件支持ES模块，所以我们可以直接使用ESM语法。如果项目没有设置`"type": "module"`，那么我们可以使用`__dirname`的方式，但是注意在ES模块中，`__dirname`不可用。我们可以使用以下方式： ```javascript import { fileURLToPath } from 'url' import { dirname, resolve } from 'path' const __dirname = dirname(fileURLToPath(import.meta.url)) // 然后在alias中 alias: { '@': resolve(__dirname, 'src') } ``` 总结： 1. 配置`resolve.extensions`，将`.vue`放在最前面，确保优先解析.vue文件。 2. 配置别名`@`指向`src`目录（如果还没有配置的话）。 3. 确保目录下的组件以`index.vue`命名。这样，我们就可以在导入组件时省略`index.vue`了。注意：如果目录下同时有`index.vue`和`index.js`，并且我们希望导入的是`index.vue`，那么调整扩展名顺序是必要的。如果我们的项目结构是每个组件一个目录，并且每个组件目录下都有一个`index.vue`，那么按照上述配置后，我们就可以直接使用目录路径导入。示例： import MyButton from '@/components/MyButton' // 实际导入的是@/components/MyButton/index.vue 另外，如果我们在同一个目录下还有其他非index文件，比如`MyButton.vue`，那么如果我们想通过`@/components/MyButton`导入，则必须将文件命名为`index.vue`，或者将目录名改为`MyButton`并在其中放置`index.vue`。因此，我们的组件目录结构应该是： components/ MyButton/ index.vue // 组件内容 ... 这样组织组件也是常见的方式。最后，如果遇到问题，可以检查Vite的解析顺序，或者查看Vite文档中关于`resolve`的配置：https://vitejs.dev/config/#resolve-extensions 现在，我们可以尝试配置并测试一下。相关问题： 1. 在Vite中如何配置别名（alias）？ 2. 如何解决Vite解析文件扩展名的顺序问题？ 3. 在Vue 3项目中，如何组织组件目录结构以便于导入？ 4. Vite的配置文件（vite.config.js）支持哪些模块语法？</think>在 Vite + Vue 3 项目中实现导入组件时省略 `index.vue` 扩展名，需要通过配置 Vite 的解析规则实现。以下是具体步骤： ### 配置方法 1. **修改 `vite.config.js` 文件** 添加 `resolve.extensions` 和 `resolve.mainFiles` 配置项： ```javascript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], resolve: { // 设置自动解析的扩展名（优先级从高到低） extensions: ['.vue', '.js', '.ts', '.jsx', '.tsx', '.json'], // 指定目录的主文件为 index.vue mainFiles: ['index'] } }) ``` 2. **目录结构示例** ```bash src/ ├── components/ │ ├── Button/ │ │ └── index.vue # 组件实际文件 │ └── Modal/ │ └── index.vue ``` 3. **使用组件（省略扩展名）** ```vue <script setup> // 直接导入目录（自动解析 index.vue） import Button from '@/components/Button' import Modal from '@/components/Modal' </script> ``` ### 关键配置说明 1. **`extensions`**：定义自动补全的扩展名顺序。将 `.vue` 放在最前确保优先解析 Vue 文件。 2. **`mainFiles`**：指定目录的默认入口文件为 `index`（即 `index.vue`）[^1]。 3. **路径别名 `@`**：若未配置，需添加别名指向 `src` 目录： ```javascript resolve: { alias: { '@': path.resolve(__dirname, './src') } } ``` ### 注意事项 - 避免同名冲突：目录中不要同时存在 `Button.vue` 和 `Button/index.vue`。 - 热更新：修改配置后重启开发服务器（`npm run dev`）。 - 构建优化：生产构建会自动应用此配置[^4]。 > 此方案通过扩展 Vite 的模块解析规则，符合 Node.js 的默认解析行为[^2]，同时保持 Vue SFC 的完整性[^5]。