Por que isso é importante?
O Vue CLI e o Vite são ferramentas de desenvolvimento web que auxiliam na criação de projetos Vue. Enquanto o Vue CLI é uma ferramenta de linha de comando que ajuda a gerenciar projetos, o Vite é uma ferramenta de compilação e desenvolvimento que oferece uma experiência de desenvolvimento mais rápida.
Atualizar do Vue CLI para o Vite usando o Vue 2 pode trazer melhorias significativas para a experiência de desenvolvimento. O Vite usa um servidor de desenvolvimento extremamente rápido que proporciona atualizações instantâneas sem precisar reconstruir todo o projeto. Além disso, o Vite é capaz de otimizar a compilação do projeto, resultando em um tempo de compilação mais rápido e em arquivos gerados menores.
Em resumo, atualizar para o Vite pode levar a um desenvolvimento mais eficiente e rápido do projeto Vue, proporcionando uma experiência mais fluida e produtiva para os desenvolvedores.
Passo 1
Como fazer a migração
O primeiro passo para migrar para o Vite é atualizar as dependências no arquivo package.json. Para fazer isso, é necessário remover as dependências relacionadas ao Vue CLI, tais como "@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-plugin-router", "@vue/cli-plugin-vuex" e "@vue/cli-service". Além disso, também é possível remover o "sass-loader", uma vez que o Vite já fornece suporte integrado para pré-processadores mais comuns.
// package.json
"@vue/cli-plugin-babel": "~4.0.0", // remove
"@vue/cli-plugin-eslint": "~4.0.0", // remove
"@vue/cli-plugin-router": "~4.0.0", // remove
"@vue/cli-plugin-vuex": "~4.0.0", // remove
"@vue/cli-service": "~4.0.0", // remove
"sass-loader": "^8.0.2" // remove
-
Em seguida, adicionamos o Vite e o plug-in do Vue para o Vite como dependências, usando as seguintes linhas:
"vite": "^4.1.0"
"@vitejs/plugin-legacy": "^4.0.1",
Como estamos migrando um projeto Vue 2, também precisamos incluir o plug-in Vite mantido pela comunidade para Vue 2. Adicionamos o seguinte trecho ao package.json:
"@vitejs/plugin-vue2": "^2.2.0"
Com os plug-ins do Vite instalados, podemos remover a seguinte linha do package.json:
//remove
"vue-template-compiler": "^2.6.11"
Depois de atualizar as dependências no arquivo package.json, precisamos executar o comando "npm install" ou "yarn install" para instalar as dependências atualizadas.
É necessario remover completamente o Babel de nossas dependências, podemos começar excluindo o arquivo babel.config.js. Além disso, podemos remover outras dependências relacionadas ao Babel do package.json, como babel-eslint e core-js, uma vez que já removemos a dependência @vue/cli-plugin-babel, que requer o próprio Babel.
Com babel-eslint removido, também precisamos removê-lo do nosso arquivo .eslintrc.
Então no arquivo .eslintrc
// remove parser options
parserOptions: {
parser: "babel-eslint",
},
env: {
node: true, // remove
es2021: true, //atualize o nó para es2021
}
Essa mudança exige que atualizemos o eslint e o eslint-plugin-vue para suportar o ambiente es2021.
Para realizar essas alterações, podemos executar o seguinte comando:
$ npm install eslint@8 eslint-plugin-vue@8
Passo 2
Configurando o Vite na raiz do projeto
Vamos criar na raiz do nosso projeto um arquivo chamado vite.config.js. Esse arquivo é responsável por configurar o Vite para o projeto Vue.js. Vamos analisar linha por linha:
import vue2 from "@vitejs/plugin-vue2";
//Aqui, o pacote @vitejs/plugin-vue2 é importado e atribuído à variável vue2. Esse plugin é necessário para suportar componentes Vue 2 no Vite.
import { fileURLToPath, URL } from "node:url"
Essa linha importa as funções fileURLToPath e URL do módulo node:url. Essas funções são usadas para manipular caminhos de arquivos no código.
export default defineConfig({
plugins: [
vue2(),
],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
},
},
})
Aqui, o objeto de configuração é exportado como o padrão. As chaves dentro dele, como plugins e resolve, são usadas para definir variáveis, plugins e opções de resolução de caminho. O Vite precisa das extensões dos arquivos, se o seu projeto for grande como o meu, é prático utilizar esse extensions, caso contrario, atualize manualmente seus imports com as extensoes dos seus arquivos.
Passo 3
Movendo o index.html
Agora, vamos mover o arquivo index.html que contém nosso aplicativo Vue.js da pasta public para a raiz do projeto, porque o Vite coloca o arquivo index.html na raiz do projeto e não no diretório público como o Vue CLI faz.
Após fazer isso, dentro do arquivo index.js precisam ocorrer as seguintes substituições:
// index.html
<!--remove-->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!--add-->
<link rel="icon" href="/favicon.ico">
Por fim, o JavaScript não será mais injetado automaticamente, então precisamos incluí-lo manualmente no arquivo index.html usando uma tag de script com o atributo type="module" e apontando para o caminho correto do arquivo main.js que está em /src/main.js.
<script type="module" src="/src/main.js"></script>
Passo 4
Atualizando as variáveis de ambiente
Precisamos atualizar as variáveis de ambiente usadas pelo nosso projeto. As variáveis de ambiente são informações que o projeto pode usar para se adaptar a diferentes situações. No Vite, podemos usar um arquivo chamado .env para armazenar essas informações.
No entanto, há uma diferença importante no Vite em relação ao Vue CLI: agora, em vez de usar process.env para acessar essas variáveis, precisamos usar import.meta.env. Além disso, se você costumava usar variáveis de ambiente com o prefixo VUE_APP_, precisará alterá-las para usar o prefixo VITE_.
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL
"BACK_API": "$VUE_APP_BACK_API", ///remove
"BACK_API": "$VITE_BACK_API", ///faça isso em todos os locais semelhantes
Passo 5
Atualizando os scripts
Para usar o Vite, precisamos atualizar algumas coisas no nosso arquivo de configuração chamado package.json. Isso inclui atualizar os comandos que usamos para desenvolver e construir nosso aplicativo.
Antes, quando usávamos o Vue CLI, usávamos os comandos "serve" e "build", mas agora com o Vite, usamos "dev" e "build". Também precisamos atualizar o comando "serve" para "preview" se quisermos visualizar a compilação de produção localmente.
// package.json
"serve": "vue-cli-service serve", // remove
"build": "vue-cli-service build", // remove
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
Após isso, execute npm run dev e veja no terminal se o vite está rodando, caso ele dê erro, veja se o erro está incluido no próximo passo.
Erros que podem acontecer durante a migração e como resolver
Failed to resolve entry for package "fs"
O erro Failed to resolve entry for package "fs". The package may have incorrect main/module/exports specified in its package.json.' geralmente acontece porque o código está tentando acessar o pacote "fs" em um ambiente que não tem acesso ao sistema de arquivo, a solução para ele não se encontra nas documentações oficiais. Para resolver esse erro, vamos adicionar a seguinte linha no nosso package.json
///package.json
dependencies{
"rollup-plugin-node-builtins": " ^2.1.2 "}
}
e no nosso arquivo vite.config.js adicionaremos o seguinte:
resolve: {
alias: {
fs: require.resolve('rollup-plugin-node-builtins'),
Com isso, o seu erro irá sumir rapidamente, lembre-se sempre de dar o npm install ou yarn install, para adicionar os pacotes no projeto.
Process is not defined
Outro erro comum, porem com a resolução dificil de encontrar, é o ReferenceError: process is not defined, ele ocorre pela ausencia de de uma definição global para process, então, no arquivo vite.config.js, adicione a seguinte linha
define: {
'process.env': {},
},
Espero que esse artigo tenha sido útil, no próximo iremos abordar a nova configuração do plugin i18n no projeto, para implementação de traduções.
Top comments (0)