路径别名--Vue项目初始配置alias

路径别名--Vue项目初始配置alias

实现效果

新建一个vue项目时，可以配置好文件别名，实现如下效果：

复杂的import路径:"../../pages/apis/xx.js"（先进到src，再···）

将src文件夹的路径配置为简单的'@/'之后，简化为：

简单的import路径:"@/pages/apis/xx.js"

实现方法

'@/'可想而知不是一个真正的路径，所以我们需要配置其转换规则，在vite.config.js文件中。幸运的是，使用当前版本的vite创建初始的vue项目后，会自动在文件中配置好alias规则。规则如下所示：

接下来，为了方便我们书写路径，还需要增加代码提示，即当我们输入@/时，代码编辑器会有相应的代码提示。在vscode编辑器中，实现方式如下：

1. 根目录下新建一个文件jsconfig.json
2. 文件内容填入

🎉实现成功！！！

🦀🦀

进一步了解别名配置

了解的知识：node.js 中的 URL类、fileURLToPath、path等知识

先看看在webpack中配置别名路径的方法，

resolve: {
    alias: {
        $components: path.resolve(__dirname, 'src/components')
    }
}

对上述代码简单解释：

1. __dirname: 返回当前目录的绝对路径

2. path.resolve的作用：

从后向前直到构造出绝对路径，例如

那为什么在vite中不采用这种方法呢？
因为__dirname存在于commonJs模块化规范中（webpack采用），vite采用的是ES6模块，无法直接使用__dirname

解决方法： 关键是利用import.meta.url，import.meta为ES 模块化中的API，包含当前模块中的一些信息，import.meta.url表示当前模块的URL路径 方法一 类似于webpack中的方法，变向获取___dirname

// import导入path和fileURLToPath
import path from "path";
import { fileURLToPath } from "url";

// 获取当前目录URL路径 --> 转换为文件绝对路径
const __filenameNew = fileURLToPath(import.meta.url);
const __dirnameNew = path.dirname(__filenameNew);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirnameNew, "src"),
      "apis": path.resolve(__dirnameNew, "src/apis"),
      "assets": path.resolve(__dirnameNew, "src/assets"),
      "base": path.resolve(__dirnameNew, "src/base"),
      "components": path.resolve(__dirnameNew, "src/components"),
      "views": path.resolve(__dirnameNew, "src/views"),
    },

方法二 直接获取每个目标目录的绝对路径

    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "apis": fileURLToPath(new URL("./src/apis", import.meta.url)),
      "assets": fileURLToPath(new URL("./src/assets", import.meta.url)),
      "base": fileURLToPath(new URL("./src/base", import.meta.url)),
      "components": fileURLToPath(new URL("./src/components", import.meta.url)),
      "views": fileURLToPath(new URL("./src/views", import.meta.url)),
    },