vite.config.ts 基础配置

新建vue3 ts项目的vite.config.ts的初始配置如下：

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

export default defineConfig({
	plugins:[vue()]
})

设置 @ 指向 src 目录：

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

export default defineConfig({
	plugins:[vue()],
	resolve:{
		alias:{
			'@':resolve(__dirname,'src')
		}
	}
})

//如果遇到 找不到名称“__dirname” 需要先执行
npm install --save-dev @types/node

设置 打包路径：

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

export default defineConfig({
	plugins:[vue()],
	resolve:{
		alias:{
			'@':resolve(__dirname,'src')
		}
	},
	base:'./'    //设置打包路径
})

设置 服务启动，设置代理：

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

export default defineConfig({
	plugins:[vue()],
	resolve:{
		alias:{
			'@':resolve(__dirname,'src')
		}
	},
	base:'./' ,   //设置打包路径
	server:{
		port:4000,    //设置服务启动端口
		open:true,    //设置服务启动时是否自动打开浏览器
		cors:true,    //允许跨域
		//设置代理
		proxy:{
			'/api':{
				target:'http://xxx.xxx.xxx:8000',
				changeOrigin:true,
				secure:false,
				rewrite:(path) => path.replace('/api/','/')
			}
		}
	}
})

更多配置请参考 Vite官方文档

这篇好文章是转载于：学新通技术网