脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite常见配置

vite基本常见的配置讲解

 更新时间：2023年11月10日 15:46:43   作者：读心悦  
这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下

前言

最近在捣鼓一下vite，因为自己一直在使用react，就选择vite、react来体验一下vite。

使用最简单的方法创建一个应用：yarn create vite，然后选择react框架。

vite默认配置是使用了defineConfig工具函数：

import { defineConfig } from 'vite'
export default defineConfig({
  // ...
})

不管是js还是ts，都可以直接使用defineConfig工具函数，如果需要基于dev、serve或者build命令来选择不同选项，那就选择导出一个函数，比如：

export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === 'serve') {
    return {
      // dev 独有配置
    }
  } else {
    // command === 'build'
    return {
      // build 独有配置
    }
  }
})

共享选项

root

这是项目根目录【index.html的位置】，可以根据自己项目的规范来配置。比如：

const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  return {
    root,
    plugins: [react()]
  };
});

base

开发或者生产环境服务的公共基础路径：

mode

mode就是指明模式，比如：development或者production，如果在vite.config.ts中配置的话，那么就会把serve和build模式下覆盖掉

plugin

应用需用用到的插件，是一个数组，因为应用中可能使用到很多插件。vite+react中插件就是react，比如：

import react from "@vitejs/plugin-react";
const root: string = process.cwd();
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()]
  };
});

resolve.alias

设置别名，比如：完整配置

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

const root: string = process.cwd();

// 查找路径
const pathResolve = (dir: string): string => {
  return resolve(__dirname, ".", dir);
};
// 别名
const alias: Record<string, string> = {
  "@": pathResolve("src"),
  "@build": pathResolve("build"),
};
// https://vitejs.dev/config/
export default defineConfig(({ command, mode, ssrBuild }) => {
  const { VITE_PUBLIC_PATH, VITE_PORT } = loadEnv(mode, process.cwd(), "");
  return {
    base: VITE_PUBLIC_PATH,
    root,
    plugins: [react()],
    resolve: {
      alias,
    },
  };
});

server

开发服务器配置选项。

  • host，指定开发服务器监听的某个IP地址，如果是设置为0.0.0.0或者true，那就是默认监听所有的地址。
  • port，开发服务器端口号
  • strictPort，设置为true的时候，遇到端口号被占用了，就会直接退出，
  • https，是否开启HTTPS
  • open，自动在浏览器中开启应用程序
  • proxy，请求路径的代理，比如
export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法：http://localhost:5173/foo -> http://localhost:4567/foo
      '/foo': 'http://localhost:4567',
      // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      // 正则表达式写法：http://localhost:5173/fallback/ -> http://jsonplaceholder.typicode.com/
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, ''),
      },
      // 使用 proxy 实例
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        configure: (proxy, options) => {
          // proxy 是 'http-proxy' 的实例
        }
      },
      // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
      '/socket.io': {
        target: 'ws://localhost:5174',
        ws: true,
      },
    },
  },
})

总结 

到此这篇关于vite基本常见的配置讲解的文章就介绍到这了,更多相关vite常见配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在vue或H5中如何使用复制粘贴功能

    在vue或H5中如何使用复制粘贴功能

    这篇文章主要介绍了在vue或H5中如何使用复制粘贴功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 基于elementUI使用v-model实现经纬度输入的vue组件

    基于elementUI使用v-model实现经纬度输入的vue组件

    这篇文章主要介绍了基于elementUI使用v-model实现经纬度输入的vue组件,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • 图文详解vue框架安装步骤

    图文详解vue框架安装步骤

    我们在本篇内容里给大家整理了关于vue框架安装的步骤以及需要注意的地方，有需要的朋友们学习下。
    2019-02-02
  • Vue3中使用jsx/tsx的教程详解

    Vue3中使用jsx/tsx的教程详解

    这篇文章主要为大家详细介绍了如何在Vue3中使用jsx/tsx的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,需要的小伙伴可以了解下
    2024-02-02
  • Vue中的组件及路由使用实例代码详解

    Vue中的组件及路由使用实例代码详解

    组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。这篇文章主要介绍了Vue中的组件及路由使用 ,需要的朋友可以参考下
    2019-05-05
  • Vue屏幕自适应三种实现方法详解

    Vue屏幕自适应三种实现方法详解

    在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题
    2022-11-11
  • Vue混淆与还原的实现

    Vue混淆与还原的实现

    混淆是一种有效的保护措施,可以加密和压缩代码,使其难以被理解和修改,本文将介绍Vue混淆的概念以及如何进行还原,感兴趣的可以了解一下
    2023-12-12
  • vue3 process.env.XXX环境变量不生效的解决方法

    vue3 process.env.XXX环境变量不生效的解决方法

    这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue实现跑马灯简单效果

    Vue实现跑马灯简单效果

    这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue配置别名alias在webstorm不生效问题及解决

    vue配置别名alias在webstorm不生效问题及解决

    这篇文章主要介绍了vue配置别名alias在webstorm不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论