Feature 🚁

• Probably the simplest vite config plug-in.
• It can let you focus on business or fast development.
• Built-in basic plug-ins and support custom plug-ins.
• Out of the box.

Usage 🤩

Install

First u need install the packages of vite.

pnpm install vite

Then just choose which package.

pnpm install @hometownjs/vite-config-vue #vue

vite.config.ts

Create vite.config.ts in the root directory and enter the following.

import { createViteConfig } from '@hometownjs/vite-config-vue';
const hometownViteConfig = {}
const viteConfig = {}
export default createViteConfig(hometownViteConfig, viteConfig);

The createViteConfig function has two parameters, one is library, the other is vite native, and the latter will overwrite the former, using the Object.assign operation.

Congratulations on completing the configuration of vite.config.ts 🎉 🎉 🎉

Next, add the script in package.json:

{
  "dev": "vite --mode=development",
  "build": "vite build --mode=production",
}

do it:

# start dev serve
pnpm dev

# build production package
pnpm build

config vars

env-fields

@Homeownjs/vite-config-vue allows you to write some configurations directly in the env file. At the same time, it also supports customized keys.

VITE_BASE_URL

like webpack publicPath

VITE_HTTP_PORT

vite server port

VITE_HTTP_HOST

vite sever host

VITE_HTTP_PROXY

usage http proxy ?

VITE_HTTP_PROXY_PREFIX

http proxy perfix will effect when VITE_HTTP_PROXY is true.

VITE_HTTP_PROXY_URL

http proxy url will effect when VITE_HTTP_PROXY is true.

VITE_APP_NAME

app name.

VITE_VISUALIZER

usage build visualizer ?

customized keys:

import { createViteConfig } from '@hometownjs/vite-config-vue';
const hometownViteConfig = {
  // like webpack publicPath
  envVarsVITE_BASE_URL: 'VITE_BASE_URL',
  // vite server port
  envVarsVITE_HTTP_PORT: 'VITE_HTTP_PORT',
  // vite sever host
  envVarsVITE_HTTP_HOST: 'VITE_HTTP_HOST',
  // usage http proxy ?
  envVarsVITE_HTTP_PROXY: 'VITE_HTTP_PROXY',
  // http proxy perfix will effect when VITE_HTTP_PROXY is true.
  envVarsVITE_HTTP_PROXY_PREFIX: 'VITE_HTTP_PROXY_PREFIX',
  // http proxy url will effect when VITE_HTTP_PROXY is true.
  envVarsVITE_HTTP_PROXY_URL: 'VITE_HTTP_PROXY_URL',
  // app name
  envVarsVITE_APP_NAME: 'VITE_APP_NAME',
  // usage visualizer ?
  envVarsVITE_VISUALIZER: 'VITE_VISUALIZER',
}
const viteConfig = {}
export default createViteConfig(hometownViteConfig, viteConfig);

env files config: e.g. .env.production

# app name
VITE_APP_NAME = 'hometown-h5-template'

# same as webpack publicPath
VITE_BASE_URL = '/'

# usage hash or history route ?
VITE_HASH_ROUTE = 'false'

# usage http proxy ?
VITE_HTTP_PROXY= 'false'

# http proxy url will effect when VITE_HTTP_PROXY is true.
VITE_HTTP_PROXY_URL = ''

# http proxy perfix will effect when VITE_HTTP_PROXY is true.
VITE_HTTP_PROXY_PREFIX = ''


# usage visualizer ?
VITE_VISUALIZER = 'true'

other-fields

default:

const hmtViteConfigDefault = {
  // alias, u can config this at here, also at viteConfig too.
  // same as { '~': vitePathRoot.value }
  vitePathRoot: '',
  // same as { '@': vitePathSrc.value }
  vitePathSrc: '',
  // custom some alias
  viteAliasCustom: {},

  // plugins, @Some basic plug-ins are built in homeownjs/vite-config-vue, which are basically enough.
  //  Of course, if you need to, you can add new plug-ins on this basis
  vitePluginsDefaults: ['legacy', 'vue', 'html', 'visualizer'],
  vitePluginsCustom: [],
  unpluginResolvers: [''],

  // build
  buildGenerateGz: true,
  buildDropConsole: true,
  buildDropDebugger: true,
  buildDropComments: true
};

Author

HoMeTown 🙊