vite插件环境变量指定打包入口文件-一一网

项目结构：

├── 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(/__MAIN__/, '/src/main.prod.js')   // 生产环境
    default:
      return code.replace(/__MAIN__/, '/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: ['__MAIN__'] // 排除 __MAIN__
  },
})
复制代码

index.html 配置如下：

通过动态改变 html 中引入的 vue 入口文件路径来实现

<!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="__MAIN__"></script>
  </body>
</html>
复制代码

package.json 配置：

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

文章版权归作者所有，未经允许请勿转载。

THE END

前端