vite.config.js 配置别名问题

Question

vite.config.js 配置别名

// vite.config.js
function resolve(dir) {
  return path.resolve(__dirname, dir);
}
module.exports = {
  alias: {
    "/@/": resolve("src"),
    "/@utils/": resolve("src/utils"),
  },
};

//router.js
// 正常运行，别名使用成功
const routes = [
  {
    path: "/",
    component: () =>
      import(/* chunkName: DashBoard */ "/@/views/dashboard.vue"),
  },
  {
    path: "/login",
    component: () => import(/* chunkName: Login */ "/@/views/login.vue"),
  },
];

// login.vue
import http from "/@utils/http.js";
// 去掉这个引入就正常运行。
报错

使用
import http from "/@/utils/http.js";
也会报错。对这个配置有点懵逼

Answer 1

vite 在配置别名时，别名需要以 / 开头和结尾。
要注意别名对应的文件路径是否正确。按照以下配置是完全没有问题的。

module.exports = {
  alias: {
    "/@/": resolve("src"),
    "/@utils/": resolve("src/utils"),
  },
};

报错了可以先检查以下文件的路径是否正确

Answer 2

module.exports = {
  alias: {
    "@": resolve("src"),
    "@utils": resolve("src/utils"),
  },
};


import http from "@utils/http.js";