需求：
对此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 和其命令行工具：
-
确保您的项目中已经安装了 Node.js（最好是 LTS 版本）和 npm（Node.js 包管理器）。
-
打开终端或命令行提示符，在项目的根目录下运行以下命令安装 Vite：
npm install -g vite这将全局安装 Vite 的命令行工具。
-
安装完成后，你应该能够在终端中执行
vite命令了，可以尝试运行vite -h来验证是否正确安装。
如果仍然出现 “bash: vite: command not found” 错误，请检查以下几点：
-
确保全局安装目录已添加到您的系统的环境变量中。您可以通过运行
npm bin -g命令来查看全局安装目录的路径，然后将它添加到 PATH 环境变量中。 -
如果您是在 Windows 系统上安装，确保您的全局安装目录（如
%USERPROFILE%\AppData\Roaming\npm）在系统的 PATH 环境变量中。
如果您在按照以上步骤操作后仍然无法使用 vite 命令，建议您重新安装 Vite 或尝试其他解决方法，如使用 npx 运行 Vite: npx vite build --mode development。
如果该问题仍然存在或您有进一步的疑问，请提供更多关于您的操作系统、Vite 版本和安装过程的细节，以便更好地帮助您解决问题。
