vite+vue+ts+element-plus从零开发管理后台框架(02)-路径别名配置

路径别名是为了方便模块文件引入,比如有 src/util/time_util.ts 这样一个模块。如果没有路径别名,可能有的是 import time_util from './time_util',有的是 import time_util from '../../../../../time_util' 这样引入。而有了路径别名,不管当前模块文件在哪个路径,都可以统一用 import time_util from '@/util/time_util' 这样的方式引入。

ts 文件内使用别名#

编辑 tsconfig.app.jsoncompilerOptions 字段添加如下配置。

"types": ["element-plus/global"],

"baseUrl": "./",
"paths": {
    "@/*": ["src/*"]
}

vue 文件内使用别名#

编辑 vite.config.ts, 内容如下。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
})
本作品采用《CC 协议》,转载必须注明作者和本文链接