Disabling Vue devtools for Vite + Vue 3 project

519 Views Asked by At

Web-app built with Vue.js v3.3.4 Vite v4.4.9

On my production web-site octo-buy.com you may notice that Vue-devtools are getting full access to the page. Which is totally wrong because it is a Production version and devtools should be blocked there.

Devtools are turning ON and OFF depending NODE_ENV mode and I have a feeling that Vite messes up it's modes completely.

"vite build" command executes the following script: "run-p type-check "build-only {@}" --"

No --mode specified and according to Vite's docs it will build for Production by default.

However when logging the ENV data on production web app i see

BASE_URL: "/"
DEV: true
MODE: "production"
PROD: false

And ... it doesn't make much sense to me.

Locally i see this:

BASE_URL: "/"
DEV: true
MODE: "development"
PROD: false

Here is my vite.config:

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Also i have 2 .env files: .env and .env.development and honestly they work perfectly fine.

Initial problem is that on my PRODUCTION website the Vue.js devtools are active which is not OK security-wise. And it seems that Vue devtools are watching PROD value from ENV.

Any idea how to eventually set PROD in vite to be TRUE when it is running in PRODUCTION?

I tried adding

define: {
    "process.env": {
      NODE_ENV: "development",
    },
  },

Into vite.config to kinda FORCE it run in production - nothing helps. I tried running vite build --mode production - doesn't help. I tried setting NODE_ENV="production" directly in .env files - doesn't help.

0

There are 0 best solutions below