我们都知道 webpack 提供了 resolve.alias 对象来处理路径问题，避免使用相对路径来引入相关的资源文件，例如下面的例子
{
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
}
}
}
于是尝试在 vite.config.js 文件里也声明同样的配置
// vite.config.js
import { defineConfig } from "vite";
import path from "path";
export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "/src"),
},
},
});
结果使用起来报错 404 ，找不到对应的资源文件，Failed to load resource: the server responded with a status of 404 (Not Found)
如何解决呢？
可以通过第三方插件来实现，首先在项目中安装 @rollup/plugin-alias 这个包。
npm install @rollup/plugin-alias --save-dev
// or
yarn add -D @rollup/plugin-alias
然后在 vite.config.js 文件引入 alias 插件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import alias from "@rollup/plugin-alias";
import { resolve } from "path";
const projectRootDir = resolve(__dirname);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
alias({
entries: [
{
find: "@",
replacement: resolve(projectRootDir, "src"),
},
],
}),
],
server: {},
build: {
outDir: "dist",
},
});
或者下面这种写法也可以实现
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import alias from "@rollup/plugin-alias";
import { resolve } from "path";
const projectRootDir = resolve(__dirname);
// https://vitejs.dev/config/
export default defineConfig({
plugins: [alias(), vue()],
resolve: {
alias: {
"@": resolve(projectRootDir, "src"),
},
},
server: {},
build: {
outDir: "dist",
},
});
另一种解决方法
当然也可以尝试不使用插件来解决，这个方法没试过，可以一试，首先在 vite.config.js 文件配置 alias
import { defineConfig } from "vite";
import * as path from "path";
export default defineConfig({
resolve: {
alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
},
});
如果项目使用 typescript 需要在 tsconfig.json 文件的 paths 加入以下配置
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
最后在 .eslintrc.js 配置检测问题，避免 eslint 下划线太多，你懂的，很恶心。
module.exports = {
settings: {
"import/resolver": {
node: {
extensions: [".js", ".vue", ".ts", ".d.ts"],
},
alias: {
extensions: [".vue", ".js", ".ts", ".scss", ".d.ts"],
map: [
["@/components", "./src/components"],
["@/pages", "./src/pages"],
["@/router", "./src/router"],
["@/store", "./src/store"],
["@/styles", "./src/styles"],
["@/types", "./src/types"],
["@/utils", "./src/utils"],
],
},
},
},
};
