Npm run build no projeto vue - resolvido

Front-end
#1

package.json

{
  "name": "askme",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite --port 8082",
    "build": "vue-tsc --noEmit && vite build --mode homologacao",
    "homologacao": "vue-tsc --noEmit && vite build --mode homologacao",
    "preview": "vite preview --port 5050",
    "typecheck": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "vfonts": "^0.0.3",
    "vue": "3.2.31",
    "vue-router": "^4.1.6",
    "keycloak-js": "^20.0.3"
  },
  "devDependencies": {
    "@playwright/test": "^1.28.1",
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/jsdom": "^20.0.1",
    "@types/node": "^18.11.12",
    "vite-plugin-vuetify": "1.0.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.2.6",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "jsdom": "^20.0.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "~4.7.4",
    "vite": "4.1.1",
    "vue-tsc": "^1.0.12"
  }
}

vite.config.ts

import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  define: {
    "process.env": {},
  },
  css: {
    preprocessorOptions: {
      scss: {},
    },
  },
  optimizeDeps: {
    exclude: ["vuetify"],
    entries: ["./src/**/*.vue"],
  },
});

tsconfig.vite-config.json

{
  "extends": "@vue/tsconfig/tsconfig.node.json",
  "include": ["vite.config.*"],
  "compilerOptions": {
    "composite": true,
    "allowJs": true,
    "types": ["node"]
  }
}

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "allowJs": true,
    "types": ["node", "vite/client"],
    "target": "ESNext"
  },
  "references": [
    {
      "path": "./tsconfig.vite-config.json"
    }
  ]
}

Acontece este erro:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.

image
image1393×463 19.1 KB

O que pode ser ?

#2

mostra o html

1 curtida
#3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AskMe - o chatbot da Bloom</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body
    class="flex w-screen h-screen text-gray-800 bg-neutral-200 dark:bg-neutral-800 dark:text-gray-200"
  >
    <div id="app" class="flex flex-col justify-between w-screen h-screen"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
#4

tenta colocar o

 base: '/',

depois de plugins e tenta fazer o build de novo

1 curtida
#5

Mesmo erro.

#6

Pode colocar o projeto no GitHub? Assim fica complicado de entender

#7
#8

aqui ta rodando normal.

image
image2558×1048 338 KB

como vc ta rodando seu build?

1 curtida
#9

Estranho.

Eu pego os arquivos que foi gerado no build e coloco no servidor.

Aperto CTRL + F5, e mostra a mensagem de erro.

#10

entendi. seu servidor é apache?

1 curtida
#11

Sim

#12

blz, cria um arquivo chamado .htaccess. Pode ser na mesma pasta que estão os arquivos do seu projeto mesmo.

e cola isso aqui:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

salva o arquivo, tenta recarregar e vê se o problema vai acontecer dnv

1 curtida
#13

Deu este erro.

image
image1345×218 14.7 KB

image

#14

olha o log do apache, geralmente fica nesse caminho:

/var/log/apache2/error.log
#15

Foi resolvido assim:

Digitei o comando npm install dotenv, localmente

import vue from "@vitejs/plugin-vue";
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import * as dotenv from "dotenv";

export default defineConfig(({ command, mode }) => {
  dotenv.config({ path: __dirname + "/.env." + mode });

  return {
    base: process.env.VITE_APP_BASE,
    plugins: [vue()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    define: {
      "process.env": {},
    },
    css: {
      preprocessorOptions: {
        scss: {},
      },
    },
    optimizeDeps: {
      exclude: ["vuetify"],
      entries: ["./src/**/*.vue"],
    },
  };
});

.env.development
VITE_APP_BASE=/

.env.homologacao
VITE_APP_BASE=/askme

Porque o endereço é site.com.br/askme.

1 curtida
#16

Não precisaria ter instalado o dotenv na verdade, vc pode usar o

import.meta.env.VITE_APP_BASE
1 curtida
#17

SIm,

Está dando este erro

image
image722×510 18.9 KB

#18

lá no seu tsconfig, vc pode incluir o “vite/client” dentro de types, exemplo:

image

1 curtida
#19

vi que já tem… pode incluir no tsconfig.vite-config.json então!

1 curtida