vue3打包配置

1、vite.config.js文件

主要配置在于base和build

复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
	resolve: {
		alias: {
			'@': path.resolve(__dirname, 'src')
		},
		extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
	},
	define: {
		__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
	},
	base: '/qc/', // 应用的基本路径前缀
	plugins: [
		vue(),
		vueJsx()
	],
	css: {
		preprocessorOptions: {
			less: {
				javascriptEnabled: true
			}
		}
	},
	server: {
		host: '0.0.0.0',
		port: 9530,
		open: true, //在服务器启动时自动在浏览器中打开应用程序
		headers: {
			'Cross-Origin-Embedder-Policy': 'require-corp',
			'Cross-Origin-Opener-Policy': 'same-origin'
		},
		proxy: {
			'/yxy-api': {
				target: 'http://172.16.15.71:8008',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/yxy-api/, '')
			}
		}
	},
	build: {
		chunkSizeWarningLimit: 160000,
		outDir: 'yxy-qc-front'
	}
})

2、路由模式

（1）将路由模式修改为history，将路由模式修改为history模式时，正常访问是没有问题的，但当界面刷新时，会出现404的问题，该问题需要后端配合

js 复制代码

try_files $uri $uri/ /screen/index.html;

（2）路由前统一添加前缀

复制代码

const router = createRouter({
	routes: constantRoutes,
	history: createWebHistory('/qc'),
	scrollBehavior: () => ({ left: 0, top: 0 })
})

3、环境文件中的配置

（1）env.development.js

js 复制代码

# base api
VITE_API_TARGET = '/yxy-api'

（2）env.production.js

js 复制代码

# base api
VITE_API_TARGET = '/qc-api'

由于在本地开发和线上部署的环境，需要请求的地址前缀是不一样的，所以需要在各自的环境文件中去进行配置，来满足不用的需求

（3）在界面使用

复制代码

export const TARGET = import.meta.env.VITE_API_TARGET

4、有时候我们项目中会用到其他应用的地址，但是该应用的地址是不确定的，因此需要将该动态的地址放在public文件夹中，该文件夹中的东西是不参与打包的，我们可以方便快捷的修改打包后文件，快速部署应用

（1）env.development.json

js 复制代码

{
  "loginSite": "http://172.16.15.71:8080",
  "basePrefix": "/qc"
}

（2）env.production.json

js 复制代码

{
  "loginSite": "http://172.16.17.102:7098/portal/#/login/index",
  "basePrefix": "/qc"
}

（3）获取配置变量函数

js 复制代码

export async function loadEnvConfig() {
	const env = import.meta.env.MODE
	const configPath = `/env.${env}.json`
	try {
		const response = await fetch(configPath)
		return await response.json()
	} catch (error) {
		console.error('Failed to load config:', error)
		// 可以在这里提供一个默认配置或抛出异常
		return {
			loginSite: 'http://172.16.17.102:7098/portal/#/login/index'
		}
	}
}

（4）在界面中使用

js 复制代码

const handleLoginOut = () => {
	Modal.confirm({
		title: '提示',
		icon: createVNode(ExclamationCircleOutlined),
		content: '您确定要退出系统吗？',
		okText: '确认',
		cancelText: '取消',
		centered: true,
		destroyOnClose: true,
		onOk() {
			return new Promise(async (resolve) => {
				removeLocalToken()
				const envConfig = await loadEnvConfig()
				window.location.href = envConfig?.loginSite
				resolve()
			}).catch((reject) => console.error('退出时候报错：' + reject))
		},
		onCancel() {}
	})
}