【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",
    ],
  }
})