Do Vue Cli para o Vite utilizando Vue2
Tags: vue, vite, npm
Published: 2023-02-28 11:27:45

### _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. 
```javascript
 // 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:

```javascript
"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:

```javascript
"@vitejs/plugin-vue2": "^2.2.0"
```
Com os plug-ins do Vite instalados, podemos remover a seguinte linha do package.json:

```javascript
//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:

```javascript
$ 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:


```javascript
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.
```
```javascript
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.
```
```javascript
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:
```javascript
// 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.
 ```javascript 
 <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_.
```javascript 
base: process.env.BASE_URL, //remove
base: import.meta.env.BASE_URL
```
```javascript
 "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.

```javascript
// 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
```javascript
///package.json
dependencies{
    "rollup-plugin-node-builtins": " ^2.1.2 "}
}
```
e no nosso arquivo vite.config.js adicionaremos o seguinte:
```javascript
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
```javascript
 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.