andrejsharapov/.env.development

## .env.development
NODE_ENV=development
VITE_APP_TITLE="DEV project"

## .env.production
NODE_ENV=production

## App.vue
<script setup>
  const pack = {
    title: import.meta.env.VITE_APP_TITLE,
    desc: import.meta.env.VITE_APP_DESCRIPTION,
    v: import.meta.env.VITE_APP_VERSION,
  };
</script>

<template lang="pug">
h1 {{pack.title }}@{{pack.v }}
</template>

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %>@<%= version %></title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

## vite.config.js
import { loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createHtmlPlugin } from 'vite-plugin-html';

const isDevMode = process.env.NODE_ENV !== 'production';
const pkg = require('./package.json');

process.env.VITE_APP_VERSION = pkg.version;
process.env.VITE_APP_DESCRIPTION = pkg.description;

if (!isDevMode) {
  process.env.VITE_APP_TITLE = pkg.name;
}

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());

  return {
    plugins: [
      vue(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            title: env.VITE_APP_TITLE,
            desc: env.VITE_APP_DESCRIPTION,
            version: env.VITE_APP_VERSION,
          }
        }
      }),
    ],
    server: {
      port: 8080,
    },
  }
};
	<script setup>
	const pack = {
	title: import.meta.env.VITE_APP_TITLE,
	desc: import.meta.env.VITE_APP_DESCRIPTION,
	v: import.meta.env.VITE_APP_VERSION,
	};
	</script>

	<template lang="pug">
	h1 {{pack.title }}@{{pack.v }}
	</template>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title><%= title %>@<%= version %></title>
	</head>

	<body>
	<div id="app"></div>
	<script type="module" src="/src/main.js"></script>
	</body>
	</html>
	import { loadEnv } from "vite";
	import vue from "@vitejs/plugin-vue";
	import { createHtmlPlugin } from 'vite-plugin-html';

	const isDevMode = process.env.NODE_ENV !== 'production';
	const pkg = require('./package.json');

	process.env.VITE_APP_VERSION = pkg.version;
	process.env.VITE_APP_DESCRIPTION = pkg.description;

	if (!isDevMode) {
	process.env.VITE_APP_TITLE = pkg.name;
	}

	export default ({ mode }) => {
	const env = loadEnv(mode, process.cwd());

	return {
	plugins: [
	vue(),
	createHtmlPlugin({
	minify: true,
	inject: {
	data: {
	title: env.VITE_APP_TITLE,
	desc: env.VITE_APP_DESCRIPTION,
	version: env.VITE_APP_VERSION,
	}
	}
	}),
	],
	server: {
	port: 8080,
	},
	}
	};