共计 1652 个字符,预计需要花费 5 分钟才能阅读完成。
vite.config.js 文件
办法 1
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({plugins: [vue()],
resolve:{
alias:{
'@':'/src/', // 格局肯定要写对喽不然没有代码提醒或者报错
'@components':'/src/components/',
'@assets':'/src/assets/',
}
}
})
或者 数组的模式
import {defineConfig} from 'vite'
import path from "path";
import vue from '@vitejs/plugin-vue'
export default defineConfig({
resolve: {
alias: [{
find: '@',
replacement: path.resolve(__dirname, 'src')
},
{
find: 'components',
replacement: path.resolve(__dirname, 'src/components')
}
],
},
plugins: [vue()],
});
办法 2
import {defineConfig} from 'vite'
import path from "path"; //path 引入可能报错能够应用 import {resolve} from 'path'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
resolve: {
alias: {"@": path.resolve(__dirname, "src"),
"components": path.resolve(__dirname, "src/components"),
"styles": path.resolve(__dirname, "src/styles"),
"plugins": path.resolve(__dirname, "src/plugins"),
"views": path.resolve(__dirname, "src/views"),
"layouts": path.resolve(__dirname, "src/layouts"),
"utils": path.resolve(__dirname, "src/utils"),
"apis": path.resolve(__dirname, "src/apis"),
"dirs": path.resolve(__dirname, "src/directives"),
},
},
plugins: [vue()],
});
留神应用别名后肯定要在 tsconfig.json 中配置
{
"compilerOptions": {
...
"baseUrl": "./",
"paths": {"@/*": ["./src/*"] // 格局肯定要写对符号 * 不能少不然找不到 @或者没有代码提醒
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{"path": "./tsconfig.node.json"}],
}
如果用了 ts 那么还须要在 tsconfig.js 中进行额定配置,留神 path 对象是在 compilerOptions 对象外面
resolve.alias
类型:Record<string, string> | Array<{find: string | RegExp, replacement: string}>
将会被传递到 @rollup/plugin-alias 作为 entries 的选项。也能够是一个对象,或一个 {find, replacement} 的数组.
当应用文件系统门路的别名时,始终应用绝对路径。相对路径的别名值会被一成不变地应用,因而无奈被失常解析。更高级的自定义解析办法须要通过 插件 实现。
正文完