DEV Community

Dieni Kiellermann
Dieni Kiellermann

Posted on

Do Vue Cli para o Vite utilizando Vue2

#vue #vite #npm

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
-
Enter fullscreen mode Exit fullscreen mode

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",
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

Com os plug-ins do Vite instalados, podemos remover a seguinte linha do package.json:

//remove
"vue-template-compiler": "^2.6.11"
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode 
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.
Enter fullscreen mode Exit fullscreen mode 
export default defineConfig({

  plugins: [
    vue2(),
  ],
  resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
     },
   },
})
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
 "BACK_API": "$VUE_APP_BACK_API", ///remove
  "BACK_API": "$VITE_BACK_API", ///faça isso em todos os locais semelhantes
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 "}
}
Enter fullscreen mode Exit fullscreen mode

e no nosso arquivo vite.config.js adicionaremos o seguinte:

resolve: {
  alias: {
    fs: require.resolve('rollup-plugin-node-builtins'),
Enter fullscreen mode Exit fullscreen mode

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': {},
  },
Enter fullscreen mode Exit fullscreen mode

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)

Read next

mayashavin profile image

Effective Visual Regression Testing for Developers: Vitest vs Playwright

Maya Shavin 🌷☕️🏡 -

jacobandrewsky profile image

Opinionated Nuxt Starter

Jakub Andrzejewski -

mujhtech profile image

How to add a feedback box to your Vue.js app (and get notified on Slack)

Muhideen Mujeeb Adeoye -

emrancu profile image

1.1 Ins & outs of ES6(JavaScript) Import with Realworld Example and Demo Project.

AL EMRAN -