vite vue3进行多环境打包配置

需求：

对此vite创建的vu3项目进行构建，项目分为四个环境：本地、测试、预发、生产

1.在项目根目录创建四个文件夹

.env.development

.env.test

.env.pre

.env.production

2.配置不同环境的 地址和打包文件名

具体例子如下：

#.env.development 文件
# 本地环境接口地址(这里是使用了代理，解决跨域问题)

# 业务中台本地环境接口地址
VITE_API_URL = /api

# 打包文件名
VITE_APP_NAME = 'dist_dev'

#.env.test 文件
# 测试环境
VITE_ENV = test

# 测试环境接口地址
VITE_API_URL = 'http://192.168.0.0:8088'

# 打包文件名
VITE_APP_NAME = 'dist_test'

3.package.json 配置打包命名

"scripts": {
		"dev": "vite --mode development",
		"test": "vite --mode test",
		"pre": "vite --mode pre",
		"prod": "vite --mode production",
		"build:dev": "vite build --mode development",
		"build:prod": "vite build --mode production",
		"build:pre": "vite build --mode pre",
		"build:test": "vite build --mode test ",
		"preview": "vite preview"
	},

 4.在vite.config.js 进行 vite 的相关配置

注意：这里需要确认项目是否安装了这3个依赖

npm install @types/node --save-dev
npm install unplugin-auto-import -D
npm install vite-plugin-vue-setup-extend -D

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';

const pathResolve = (dir) => {
	return resolve(__dirname, '.', dir);
};

const alias = {
	'/@': pathResolve('./src/'),
};

const viteConfig = defineConfig(({ mode }) => {
	const env = loadEnv(mode, process.cwd());
	// ****打包文件名称****
	let fileName = 'dist'
	// 兼容性，以防打包崩溃
	fileName = env.VITE_APP_NAME
	return {
		plugins: [
			vue(),
			vueSetupExtend(),
			AutoImport({
				imports: ['vue', 'vue-router'],
			}),
		],
		define: {
			'process.env': {}
		},
		root: process.cwd(),
		assetsInclude: '**/*.xlsx',
		// outputDir: fileName,
		resolve: { alias },
		base: env.VITE_ENV === 'production' ? './' : './',
		server: {
			host: '0.0.0.0',
			port: 8888,
			open: false,
			proxy: {
				'/api': {
                    target: 'http://localhost:3000', // 指定要代理的目标地址
                    changeOrigin: true, // 是否改变请求的来源
                    rewrite: (path) => path.replace(/^\/api/, ''), // 可选的路径重写规则
                },
			},
		},
		css: { preprocessorOptions: { css: { charset: false } } },
        //****这里进行设置文件名****
		build: {
			outDir: fileName,
			assetsPublicPath: './'
		}
	};
});

export default viteConfig;

另附：当使用 vite build --mode development打包的时候可能会出现bash: vite: command not found的情况

解决方法：

如果在运行 vite build --mode development 时出现 “bash: vite: command not found” 错误，那通常是因为 Vite 的命令行工具没有正确安装或配置。

请确保您已经按照正确的步骤安装了 Vite，并在安装过程中全局安装了命令行工具。

您可以按照以下步骤来安装 Vite 和其命令行工具：

1. 确保您的项目中已经安装了 Node.js（最好是 LTS 版本）和 npm（Node.js 包管理器）。

2. 打开终端或命令行提示符，在项目的根目录下运行以下命令安装 Vite：

   npm install -g vite
   

   这将全局安装 Vite 的命令行工具。

3. 安装完成后，你应该能够在终端中执行 vite 命令了，可以尝试运行 vite -h 来验证是否正确安装。

如果仍然出现 “bash: vite: command not found” 错误，请检查以下几点：

1. 确保全局安装目录已添加到您的系统的环境变量中。您可以通过运行 npm bin -g 命令来查看全局安装目录的路径，然后将它添加到 PATH 环境变量中。

2. 如果您是在 Windows 系统上安装，确保您的全局安装目录（如 %USERPROFILE%\AppData\Roaming\npm）在系统的 PATH 环境变量中。

如果您在按照以上步骤操作后仍然无法使用 vite 命令，建议您重新安装 Vite 或尝试其他解决方法，如使用 npx 运行 Vite: npx vite build --mode development。

如果该问题仍然存在或您有进一步的疑问，请提供更多关于您的操作系统、Vite 版本和安装过程的细节，以便更好地帮助您解决问题。