需求：

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

除本地环境外，每次都需要将vue项目打包。

实现：

项目根目录创建四个文件夹，

.env.development

 .env.test 

.env.pre 

.env.production

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

具体配置如下：

（.env.development 文件)

# 测试环境
VITE_ENV = development
# 测试环境接口地址
VITE_API_URL = 'http://0.0.0:11014'
# 打包文件名
VITE_APP_NAME = 'dist_development'

（.env.test 文件)

# 测试环境
VITE_ENV = test
# 测试环境接口地址
VITE_API_URL = 'http://0.0.0:11014'
# 打包文件名
VITE_APP_NAME = 'dist_test'

...

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"
},

vite.config.js 进行 vite 的相关配置（全部）

文件名相关的配置时注释的地方加星号

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: {
				'/newapi': {
					target: 'http://192.168.255.215:9901',
					changeOrigin: true,
					rewrite: path => path.replace(/^\/newapi/, '')
				},
				'/allapi': {
					target: 'http://192.168.9.143:8076',
					changeOrigin: true,
					rewrite: path => path.replace(/^\/allapi/, '')
				}
			},
		},
		css: { preprocessorOptions: { css: { charset: false } } },
        //****这里进行设置文件名****
		build: {
			outDir: fileName,
			assetsPublicPath: './'
		}
	};
});

export default viteConfig;

一、跨域

1 请求的url

后端的apiurl都是这样的格式 

https://test.com/api/login  
https://test.com/api/home

2 proxy配置

/vite.config.ts 文件

export default defineConfig({
server: {
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'https://test.com', //跨域地址
        changeOrigin: true //支持跨域
        //因为我的url地址本来就有/api所以没有重写
      }
    }
  },
})

/.env文件

VITE_APP_BASE_API=https://test.com/api

3 axios配置

因为我封装了axios，所以在**/api/request.ts**文件里

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 15000
})
//请求拦截器。。等配置

二、打包

1 npm run build

2 本地服务器运行打包后的文件

安装http-server

npm install http-server -g //全局安装。

终端切换到打包后的目录，运行

cd dist
http-server

运行结果：