Vue3 打包后本地预览（不需要起服务--@vitejs/plugin-legacy）

本文介绍了如何在Vue项目中配置vue.config.js以解决打包时的依赖问题，以及确保使用createWebHashHistory模式设置路由。

一、安装 @vitejs/plugin-legacy

pnpm add @vitejs/plugin-legacy -D

二、配置 vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
	base:"./",
	plugins:[
		vue(),
		legacy({
			targets:["defaults","not IE 11"],
		})
	]
});

三、调整路由

vue-router 模式必须是 createWebHistory 模式

import { createRouter, createWebHashHistory } from 'vue-router';
import routes from './routes';

const router: Router = createRouter({
  history: createWebHashHistory(),
  routes: routes,
});

四、打包预览

完成上述配置后即可打包预览，打包出现如果缺少依赖包报错，按照报错进行安装相关依赖，打包后直接点击dist文件下的index.html 文件便可预览