加载中...
vite 配置
第1节:项目介绍
第2节:项目后端准备和接口文档
第3节:知识补充:Router 4
第4节:知识补充:Pinia
第5节:vite 配置
第6节:Axios 封装
第7节:项目结构讲解
课文封面

vite.config.js 是一个配置文件,用于定制和优化 Vite 项目的开发和打包过程。通过该配置文件,可以调整项目的开发服务器设置、构建选项、使用插件以及其他高级功能,以满足项目的具体需求。

视频

基础配置项

server 选项

本地运行时,开发环境服务器的配置。

host

默认 localhost,设置为 true0.0.0.0 时会监听所有地址,让局域网内的设备进行访问,否则只有本机能访问项目。

open

默认 false,设置为 true 时,运行项目时会自动打开浏览器访问项目。

prot

指定项目端口号( 默认5173 ),如果端口号被占用,会自动尝试下一个可用的端口号,所以设置的值不一定是最终的服务器端口。

proxy

设置代理规则,当需要解决接口跨域问题时,可以进行配置转发请求。

resolve 选项

控制模块如何解析其导入的路径。

alias

设置别名,方便导入或引用,需要填写绝对路径,如果使用的是相对路径,编辑器会无法进行快捷跳转。

extensions

配置导入文件时可忽略的文件扩展名。
不建议忽略自定义导入类型的扩展名(例如:.vue),因为它会影响 IDE 和类型支持。
使用 vue + ts 时不支持忽略 .vue;不使用 ts 时,如果编辑器是 VScode 则无法进行快捷跳转,WebStorm 则正常使用。

代码示例

import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ server:{ host: true, port: 3000, proxy: { "/api": { target: "http://192.168.1.90:4000", }, "/images": { target: "http://192.168.1.90:4000", }, } }, plugins: [ vue(), ], resolve: { alias: { // 配置别名 '@': fileURLToPath(new URL('./src', import.meta.url)) }, extensions: [ // 导入文件时,忽略扩展名 ".js", ".json", ".vue", ], } })