[英]Vite: resolve.alias - how to resolve paths?
resolve.alias能做什么? 它不解決以下路徑:
// vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, '/src'),
},
}
})
在我的 HTML 中:
<img src="@/assets/images/sample-1.jpg">
瀏覽器控制台中的錯誤:
GET http://localhost:3000/@/assets/images/sample-1.jpg
Failed to load resource: the server responded with a status of 404 (Not Found)
client:180 [vite] connecting...
client:202 [vite] connected.
任何想法如何正確地做到這一點?
npm install @rollup/plugin-alias --save-dev
紗線添加 -D @rollup/plugin-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: {
host: '0.0.0.0',
port: 10086,
open: false,
cors: true,
},
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: {
host: '0.0.0.0',
port: 10086,
open: false,
cors: true,
},
build: {
outDir: 'dist',
}
})
2.7.12 版(我的當前版本)的一個簡單解決方案是將別名聲明為數組:
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import path from 'path'
export default defineConfig({
plugins: [ vue() ],
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, './src') },
{ find: '@config', replacement: path.resolve(__dirname, './src/config') },
{ find: '@plugins', replacement: path.resolve(__dirname, './src/plugins') },
{ find: '@views', replacement: path.resolve(__dirname, './src/views') },
{ find: '@mixins', replacement: path.resolve(__dirname, './src/mixins') },
{ find: '@svg', replacement: path.resolve(__dirname, './src/svg') },
{ find: '@models', replacement: path.resolve(__dirname, './src/models') },
{ find: '@components', replacement: path.resolve(__dirname, './src/components') },
]
}
})
檢查類型時可以看到合法格式:
resolve?: ResolveOptions & {
alias?: AliasOptions;
};
其中 AliasOptions 是一個別名數組:
export declare type AliasOptions = readonly Alias[] | { [find: string]: string }
看起來不需要額外的插件(vite 3.1.0),配置vite.config.js
:
import { defineConfig } from 'vite';
import * as path from 'path';
export default defineConfig({
...
resolve: {
alias: [
{ find: '@', replacement: path.resolve(__dirname, 'src') },
],
},
...
});
tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"],
},
...
},
...
}
也不要忘記 linting,eslint 也應該知道別名。 只需安裝 eslint 插件eslint-import-resolver-alias
並在 eslint config .eslintrc.js
中定義它
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'],
],
},
},
},
...
};
正如你所看到的,我為每個文件夾定義了別名,這是因為我對整個文件夾src
的別名有問題,它會拋出以@
符號開頭的包的錯誤 - 無法解析 package,但目前的方法效果很好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.