【Vue3进阶】- Vite 配置
视频
Vite 配置
基础配置项
server 选项
本地运行时，开发环境服务器的配置。
host
默认 localhost，设置为 true 或 0.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",],}
})