Vite: resolve.alias - 如何解析路径?
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(我当前版本)的一个简单解决方案是将别名声明为 array:
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 }
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(我当前版本)的一个简单解决方案是将别名声明为 array:
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 }