https://github.com/PengBoUESTC/vite-plugin-env-switch

vite-plugin-env-switch
https://github.com/PengBoUESTC/vite-plugin-env-switch

Last synced: about 2 months ago
JSON representation

vite-plugin-env-switch

• Host: GitHub
• URL: https://github.com/PengBoUESTC/vite-plugin-env-switch
• Owner: PengBoUESTC
• Created: 2022-08-31T09:41:14.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-16T02:49:21.000Z (8 months ago)
• Last Synced: 2024-09-17T04:18:19.428Z (3 months ago)
• Language: TypeScript
• Size: 169 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• fucking-awesome-vite - vite-plugin-env-switch - Switch project env and restart vite server without command line operation. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-env-switch - Switch project env and restart vite server without command line operation. (Plugins / Framework-agnostic Plugins)

README

        
# vite-plugin-env-switch

vite-plugin-env-switch

![截屏2023-06-20 下午8 40 39](https://github.com/PengBoUESTC/vite-plugin-env-switch/assets/57180744/d7fe11f8-4661-462f-aa7f-01006e55f55e)

**U can switch the server env by click the btns on page, and dont need to restart your server by CMD.**

## change the server env 

- vite.config.ts

```javascript

// vite config 

export default defineConfig({

  //...

  plugins: [

    envSwitchPlugin({

      wsProtocol: 'vite-hmr', // ws protocol

      envs: ['prepare', 'development', 'production'], // env vars

      wsPath: `${wsprotocol}://${host}/${base}:${port}/`, // link

      root: __dirname, // env config root path

      eventName: 'env-check'

    }),

  ]

  //...

})

```

- inject code in index.html, depend on `envs` config, there will be some buttons to trigger ws event.

- these code will be inject by `transformIndexHtml.transform`

```html



  dev

  pre

  pro



```


- get a ws socket to send event to vite server

```javascript

const ws = new WebSocket('wss://xx', 'vite-hmr')

document.querySelectorAll('.env-btn').forEach(dom => {

  const { dataset } = dom

  dom.addEventListener('click', () => handleEnv(dataset.env))

})

function handleEnv(env) {

  ws.send(JSON.stringify({ type: 'custom', event: 'env-check', data: { env } }))

}

```