新建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官方文档

Logo

前往低代码交流专区

更多推荐