vite插件通过环境变量指定vue入口文件

梦里梦外; 2022-09-11 05:25 192阅读 0赞

## 项目结构： ##

├── build
    ├── src
    │   ├── pages
    │   ├── App.vue
    │   ├── main.dev.js       // 通过环境变量指定入口 main 文件
    │   ├── main.prod.js
    │   └── ...
    ├── index.html
    ├── package.json
    └── vite.config.js

## vite.config.js 配置如下： ##

const path = require('path')
    import {  defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    
    const transformIndexHtml = (code) => { 
      switch (process.env.NODE_ENV) { 
        case 'production':
          return code.replace(/__INDEX__/, '/src/main.prod.js')   // 生产环境
        default:
          return code.replace(/__INDEX__/, '/src/main.dev.js')    // 开发环境
      }
    }
    
    export default defineConfig({ 
      root: __dirname,
      plugins: [
        { 
    		name: 'demo-transform',
    		  enforce: 'pre',
    		  // vite build is production will not invoke `transformIndexHtml`
    		  transform (code, id) { 
    		    if (id.endsWith('.html')) { 
    		      return {  code: transformIndexHtml(code), map: null }
    		    }
    		  },
    		  transformIndexHtml
    	 },
    	 vue()
      ],
      define: { 
        'process.env.NODE_ENV': `'${ process.env.NODE_ENV}'`
      },
      optimizeDeps: { 
        exclude: ['__INDEX__'] // 排除 __INDEX__
      },
    })

## index.html 配置如下： ##

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
      </head>
      <body>
        <div id="app"></div>
        <script type="module" src="__INDEX__"></script>
      </body>
    </html>

## package.json 配置： ##

{ 
    	...
    	"scripts": { 
    	    "dev": "vite",
    	    "build": " cross-env NODE_ENV=production && vite build",
    	    "serve": "vite preview"
     	 },
     	 ...
    }