vite.config.js 文件
办法 1
import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()], resolve:{ alias:{ '@':'/src/', // 格局肯定要写对喽不然没有代码提醒或者报错 '@components':'/src/components/', '@assets':'/src/assets/', } }})或者 数组的模式
import { defineConfig} from 'vite'import path from "path";import vue from '@vitejs/plugin-vue'export default defineConfig({ resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }, { find: 'components', replacement: path.resolve(__dirname, 'src/components') } ], }, plugins: [vue()],});办法2
import {defineConfig} from 'vite'import path from "path"; //path引入可能报错能够应用 import {resolve} from 'path'import vue from '@vitejs/plugin-vue'export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src"), "components": path.resolve(__dirname, "src/components"), "styles": path.resolve(__dirname, "src/styles"), "plugins": path.resolve(__dirname, "src/plugins"), "views": path.resolve(__dirname, "src/views"), "layouts": path.resolve(__dirname, "src/layouts"), "utils": path.resolve(__dirname, "src/utils"), "apis": path.resolve(__dirname, "src/apis"), "dirs": path.resolve(__dirname, "src/directives"), }, }, plugins: [vue()],});留神应用别名后肯定要在tsconfig.json中配置
{ "compilerOptions": { ... "baseUrl": "./", "paths": { "@/*": ["./src/*"] //格局肯定要写对符号*不能少不然找不到@或者没有代码提醒 } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }],}如果用了ts那么还须要在tsconfig.js中进行额定配置，留神path对象是在compilerOptions对象外面
resolve.alias
类型： Record<string, string> | Array<{ find: string | RegExp, replacement: string }>将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也能够是一个对象，或一个 { find, replacement } 的数组.当应用文件系统门路的别名时，始终应用绝对路径。相对路径的别名值会被一成不变地应用，因而无奈被失常解析。更高级的自定义解析办法须要通过 插件 实现。