vite vue3进行多环境打包配置

**Vite + Vue3 多环境打包配置**

在实际开发中，我们经常需要为同一个项目提供不同的环境版本，例如生产环境、测试环境、开发环境等。Vue3 和 Vite 提供了非常方便的多环境打包配置方式。在本文中，我们将一步步地讲解如何使用 Vite + Vue3 进行多环境打包配置。

### 一、创建一个新项目首先，我们需要在终端中运行以下命令，创建一个新的 Vue3项目：

bashnpm create vite@latest my-vue-app -- --template vue

这里，我们使用 `vite` 来创建一个新项目，模板选择为 `vue`。

### 二、安装依赖接下来，我们需要安装必要的依赖包：

bashcd my-vue-appnpm install

这将下载并安装所有必需的依赖包。

### 三、配置多环境打包现在，我们需要在项目中添加多环境打包的配置。我们可以通过创建一个 `vite.config.js` 文件来实现这一点：

javascript// vite.config.jsimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
 plugins: [vue()],
 base: './',
 envPrefix: ['VUE_APP_', 'VITE_'],
 envAllowList: ['VUE_APP_ENV', 'VITE_PORT'],
});

在这个配置文件中，我们使用 `defineConfig` 来定义 Vite 的配置。我们启用了 Vue 插件，并设置了 `base` 为当前目录。

### 四、添加环境变量接下来，我们需要添加环境变量的配置。在项目根目录下创建一个 `.env` 文件：

makefile# .envVUE_APP_ENV=devVITE_PORT=3000

在这个文件中，我们定义了两个环境变量： `VUE_APP_ENV` 和 `VITE_PORT`。

### 五、使用环境变量现在，我们可以在 Vue3 组件中使用这些环境变量：

vue// App.vue<template>
 <div>
 <h1>环境变量</h1>
 <p>VUE_APP_ENV: {{ VUE_APP_ENV }}</p>
 <p>VITE_PORT: {{ VITE_PORT }}</p>
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
 return {
 VUE_APP_ENV: process.env.VUE_APP_ENV,
 VITE_PORT: process.env.VITE_PORT,
 };
 },
};
</script>

在这个组件中，我们使用 `process.env` 来访问环境变量。

### 六、打包和测试最后，我们可以通过以下命令来打包和测试我们的项目：

bashnpm run buildnpm start

这将生成一个生产环境的构建文件，并启动一个开发服务器。我们可以在浏览器中访问 ` 来查看结果。

### 七、总结通过本文，我们已经学会了如何使用 Vite + Vue3 进行多环境打包配置。在实际开发中，这种方式将非常有用，帮助我们更好地管理和维护项目。