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

最新推荐文章于 2024-04-09 14:56:51 发布

舜岳

最新推荐文章于 2024-04-09 14:56:51 发布

阅读量2.6k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript vite

本文链接：https://blog.csdn.net/qq_41614928/article/details/120266527

版权

vue 专栏收录该内容

80 篇文章 8 订阅

订阅专栏

项目结构：

├── 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"
 	 },
 	 ...
}

舜岳

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
vite插件通过环境变量指定vue入口文件

项目结构：├── 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 { defineCon
复制链接

扫一扫