Configurando a Vite
Quando estiveres executando a vite
a partir da linha de comando, a Vite tentará automaticamente resolver um ficheiro de configuração nomeado como vite.config.js
dentro da raiz do projeto. (Outras extensões de JavaScript e TypeScript também são suportadas).
O ficheiro de configuração mais básico se parece com isto:
// vite.config.js
export default {
// opções de configuração
}
// vite.config.js
export default {
// opções de configuração
}
Nota que a Vite suporta a utilização da sintaxe de módulos de ECMAScript no ficheiro de configuração mesmo se o projeto não estiver utilizando o Módulo de ECMAScript de Node nativo, por exemplo, type: "module"
no package.json
. Neste caso, o ficheiro de configuração é pré-processado automaticamente antes do carregamento.
Tu também podes explicitamente especificar um ficheiro de configuração para utilizar com a opção de interface de linha de comando --config
(resolvido relativamente ao cwd
):
vite --config my-config.js
vite --config my-config.js
Configurar o Sensor Inteligente
Visto que a Vite disponibiliza tipagens de TypeScript, podes influenciar o sensor inteligente da tua IDE com as sugestões de tipo da jsdoc
:
/** @type {import('vite').UserConfig} */
export default {
// ...
}
/** @type {import('vite').UserConfig} */
export default {
// ...
}
Alternativamente, podes utilizar o auxiliar defineConfig
o qual deveria fornecer um sensor inteligente sem a necessidade de anotações de jsdoc
:
import { defineConfig } from 'vite'
export default defineConfig({
// ...
})
import { defineConfig } from 'vite'
export default defineConfig({
// ...
})
A Vite também suporta de maneira direta os ficheiros de configuração de TypeScript. Tu também podes utilizar vite.config.ts
com o auxiliar defineConfig
.
Configuração Condicional
Se a configuração precisar determinar condicionalmente opções baseada no comando (dev
, serve
ou build
), no modo sendo utilizado, ou se for uma construção de SSR (ssrBuild
), ela pode de preferência exportar uma função:
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// configuração especifica de desenvolvimento ('dev')
}
} else {
// command === 'build'
return {
// configuração especifica de construção ('build')
}
}
})
export default defineConfig(({ command, mode, ssrBuild }) => {
if (command === 'serve') {
return {
// configuração especifica de desenvolvimento ('dev')
}
} else {
// command === 'build'
return {
// configuração especifica de construção ('build')
}
}
})
É importante notar que na API da Vite o valor de command
é serve
durante o desenvolvimento (na interface de linha de comando vite
, vite dev
, e vite serve
são pseudónimos), e build
quando estiveres construindo para produção (vite build
).
A ssrBuild
é experimental. Ela só está disponível durante a construção ao invés de uma bandeira ssr
mais geral porque, durante o desenvolvimento, a configuração é partilhada pelo único servidor manipulando as requisições SSR e as que não são SSR. O valor poderia ser undefined
para as ferramentas que não têm comandos separados para a construção de navegador e SSR, assim utiliza comparação explicita contra true
e false
.
Configuração Assíncrona
Se a configuração precisar chamar funções assíncronas, pode de preferência exportar uma função assíncrona. E esta função assíncrona também pode ser passada através de defineConfig
para suporte de sensor inteligente melhorado:
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// configuração de vite
}
})
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// configuração de vite
}
})
Usando Variáveis de Ambiente na Configuração
As variáveis de ambiente podem ser obtidas a partir de p
como de costume.
Nota que a Vite não carrega os ficheiros .env
por padrão visto que o carregamento dos ficheiros só pode ser determinado depois da avaliação da configuração de Vite, por exemplo, as opções root
e envDir
afetam o comportamento de carregamento. No entanto, podes utilizar o auxiliar loadEnv
exportado para carregar o ficheiro .env
especifico se necessário.
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
/*
Carrega o ficheiro de variáveis de ambiente ("env")
com base no modo (`mode`) no diretório de trabalho atual.
*/
/*
Define o terceiro parâmetro para ('')
para carregar todas as variáveis de ambiente ("env")
independentemente do prefixo `VITE_`.
*/
const env = loadEnv(mode, process.cwd(), '')
return {
// configurações de vite
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV),
}
}
})
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ command, mode }) => {
/*
Carrega o ficheiro de variáveis de ambiente ("env")
com base no modo (`mode`) no diretório de trabalho atual.
*/
/*
Define o terceiro parâmetro para ('')
para carregar todas as variáveis de ambiente ("env")
independentemente do prefixo `VITE_`.
*/
const env = loadEnv(mode, process.cwd(), '')
return {
// configurações de vite
define: {
__APP_ENV__: JSON.stringify(env.APP_ENV),
}
}
})