vue3 vite 多环境打包配置

不做秃头猿

已于 2023-05-20 10:15:37 修改

阅读量4.7k

点赞数 2

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

于 2023-05-20 09:59:13 首次发布

本文链接：https://blog.csdn.net/qq_43978573/article/details/130778230

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：

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

除本地环境外，每次都需要将vue项目打包，默认都是 dist文件，需要根据不同的环境生成不同的文件名。

实现：

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

.env.development .env.test .env.pre .env.production

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

具体配置如下：

（.env.development 文件)

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

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

# 打包文件名
VITE_APP_NAME = 'dist_dev'

（.env.test 文件)

# 测试环境
VITE_ENV = test

# 测试环境接口地址
VITE_API_URL = 'http://192.168.255.211:31014'

# 打包文件名
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;