vite.config.js配置文件

发布时间：

常用配置文件

import { fileURLToPath, URL } from 'node:url'

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

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },

    base: './', // 设置打包路径为相对路径

    // 服务器配置
    server: {
        port: 8080, // 设置端口号
        host: true, // 监听所有 IP 地址
        open: true, // 启动时自动打开浏览器
        proxy: {
            '/api': {
                target: 'https://api.example.com', // 代理目标
                changeOrigin: true,                // 修改请求头中的 Origin
                rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
            }
        },
    }
})

常用配置详情

>> 打包后的静态资源路径配置

({
    // 打包后的静态资源路径配置
    // 类型：string
    // 默认值：'/'
    base: './', // 设置打包路径为相对路径
})

>> 服务器配置

({
    // 服务器配置
    server: {
        // ==== port ====
        // 类型：number
        // 默认值：3000
        // 说明：设置开发服务器使用的端口。
        port: 8080,

        // ==== host ====
        // 类型：string | boolean
        // 默认值：'localhost'
        // 说明：设置开发服务器监听的主机地址。
        // 'localhost'：仅允许本地访问。
        // '0.0.0.0'：监听所有网络接口，允许从局域网或外部设备访问。
        // true：等同于 '0.0.0.0'。
        // 可以指定具体的 IP 地址或者域名来绑定特定的主机。
        host: true,

        // ==== open ====
        // 类型：string | boolean
        // 默认值：false
        // 说明：是否在开发服务器启动后自动打开浏览器。
        // true：自动打开默认浏览器。
        // false：不自动打开浏览器。
        // string：指定要打开的 URL，浏览器会自动打开该 URL。
        open: true, // 启动时自动打开浏览器

        // ==== proxy ====
        // 类型：object
        // 默认值：{}（没有代理）
        // 说明：配置代理规则，允许将请求转发到其他服务器。
        proxy: {
            '/api': {
                target: 'https://api.example.com', // 代理目标
                changeOrigin: true,                // 修改请求头中的 Origin
                rewrite: (path) => path.replace(/^\/api/, '') // 重写路径
            }
        }
    }
})

 

标签：