vue3+ts+vite配置绝对路径

前言

在 CSS 中，相对路径和绝对路径是用来引用外部资源时的两种不同方式。

相对路径：相对路径是相对于当前文件的路径来指定资源的位置。

例如：

component: () => import('../views/primary/index.vue'),

绝对路径：绝对路径是指完整的路径，从根目录开始到资源的路径。它不考虑当前文件的位置，而是从整个文件系统的根目录开始定位资源。

例如：

component: () => import('@/views/primary/index.vue'), 

注意事项：值得注意的是这里的 @ 符合指的是根目录，同时这里的符号也可以指定其他的，只是习惯用 @ 符号。（当然这个根目录也是可以自己指定的，通常指定的src）

步骤

1.无需安装插件，直接找到 vite.config.js/ts 文件，添加下面配置。

import * as path from 'path';

export default defineConfig({
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ],
    extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名，可以自己增减
  },
})

2. 修改一下TypeScript的配置。找到 ts.config.json 文件，添加以下配置。

{
  "compilerOptions": {
    // 路径配置
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"]
    },
  },
}

可能出现的问题

上面的配置是针对于 vite版本号是2.n 的 我的是"vite": "^2.9.7",，如果你的版本是1.n，那么将rosolve去掉，使用__dirname绝对路径：

export default { 
    alias: { '/@/': resolve(__dirname, 'src'), }, 
}

如果是刚创建的TypeScript项目，有可能会出现 找不到模块“path”或其相应的类型声明 的错误提示，那么需要安装@type/node

yarn add @types/node || npm i @types/node