在Vite中导入别名的方法

也许，你正在从Vue CLI转移到Vite作为你选择的构建工具，在这个过程中，你意识到@ 的别名不再有效了😱。

这正是我的经历，也是我的反应。我到底要如何避免这种看起来很讨厌的导入../../../someComponent.vue ？

经过一番搜索和修补，我发现解决方案实际上是相当简单的。

Vite需要一个 resolve.alias配置选项，并将其传递给 @rollup/plugin-alias作为它的条目选项。所有需要的是传递给它一个绝对路径到我们项目的src 目录。

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()]
})

给你的开发命令一个重启，你就可以去参加比赛了。

额外提示

作为奖励，以下是我从Vue CLI转移到Vite时遇到的其他一些事情，我希望能为你节省一些时间 🙂

• require 导入图片不再有效（见Vite中处理静态资产的文档）。
• 当导入单个文件组件时，你必须在结尾处包括.vue