uniapp专栏 ——vue3,ts,vite4,uniapp设置路径别名

写在前面

这些内容基于通过cli搭建的uniapp项目，使用了vite4,ts4.9,vue3（组合式API,setup语法糖）。如果有版本不一致，请谨慎参考。

正文

安装依赖

npm install --save-dev @types/node

在 Vite 中， '__dirname'  并不是一个全局变量，因此无法直接vite.config.ts  文件中使用它。如果可以的话

可以简单更简单的配置(实际上也可以，但是Vscode没有检测到，误报了，所以重新找了一下其他实现方法)

// vite.config.ts
import { defineConfig } from 'vite';
import { resolve } from 'path';

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

要解决这个问题，可以使用 Node.js 的  import.meta.url  属性来获取当前文件的路径。然后，利用  fileURLToPath()  方法将  import.meta.url  转换为文件路径，然后使用  dirname()  方法获取其所在目录的绝对路径。
配置vite.config.ts文件

// vite.config.ts
import { defineConfig } from 'vite';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
export default defineConfig({
  resolve: {
    alias: {
      '/@/': `$${__dirname}/src`
    },
  },
});

上面的代码已经配置了路径别名，我们使用ts，还需要配置
tsconfig.json

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