2025年Vue3项目最常用的Vite配置

一、创建项目

普通的vue3项目执行 pnpm create vite vue3-vite --template vue
ts 的vue3 项目执行 pnpm create vite vue3-vite --tempalte vue-ts

二、常用的插件

@vitejs/plugin-vue 主要用于解析.vue文件, 上面的创建vue项目之后就会自带了
@vitejs/plugin-vue-jsx 解析jsx 语法开发的组件
vite-plugin-vue-devtools 集成Vuedev 调试工具
unplugin-auto-import 自动导入api方法
unplugin-vue-components 自动导入Vue组件

使用方式如下：

安装插件 pnpm i @vitejs/plugin-vue-jsx vite-plugin-vue-devtools unplugin-auto-import unplugin-vue-components

安装element-plus 执行pnpm install element-plus（为了演示unplugin-vue-components 自动导入组件功能）

vite.config.js 配置

js 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueDevTools from "vite-plugin-vue-devtools";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
    AutoImport({
      imports: ["vue"],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

VueDevTools 使用效果如下：

unplugin-auto-import 和unplugin-vue-components 使用效果如下

以上代码中没有导入Vue 中的ref和element-plus 中的button 组件，但是可以正常使用

三、server 配置

1. 配置代理

在开发环境，我们经常需要和后端联调，但是前端代码和后端代码不在同一个服务下面，这时候就需要配置代理了。vite 配置代理方式如下：

js 复制代码

server: {
    proxy: {
      "/api": {
        target: "http://localhost:9000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

2. 修改端口号

vite 创建的项目默认端口号是5173，但是有时候我们不想要这个端口号，或者说，后端允许请求的端口号不是5173，这时候就需要修改端口号了，修改端口号的方式如下：

js 复制代码

server: {
  port: "8000",
},

四、基础路径配置

有时候我们的项目需要基于某个目录访问的，而不是直接基于域名访问，这个时候就需要配置基础路径了，在vite 项目中通过base 选项配置基础路径，base 的默认值是/, 以下是一个会员系统的配置都要基于/member 访问

js 复制代码

base: '/member' // 访问的时候都要基于meber进行访问， 打包的时候，静态资源都会加上前面/member

运行效果

打包效果：

五、定义全局变量

vite 创建的项目可以利用define 选项配置全局变量

js 复制代码

define: {
    APP_VERSION: JSON.stringify("1.0.0.0"),
  },

在组件中使用

js 复制代码

<template>
  <div></div>
</template>

<script setup>
console.log(APP_VERSION);
</script>

<style scoped></style>

可以在控制台看到结果正常输出

define 定义的全局变量在开发环境和生产环境编译方式不太一样，在开发环境，会编译为一个全局变量，而在生产环境，则会直接替换为值

开发环境：

生产环境：

六、配置静态资源文件夹

vite创建的vue3项目默认会使用public文件夹作为静态资源的文件夹，这个文件夹里面的资源打包后会原封不动的复制到打包后的文件夹的根目录。如果你想把默认的public文件夹修改成其他的可以修改publicDir 属性图的值来进行修改

js 复制代码

publicDir: "static",

这样修改完成之后项目就会将static 作为静态资源的文件夹了

七、配置路径别名

在开发中我们直接使用相对路径会有很多的./或者../看着不友好，且当代码移动到另外的目录之后还要重新修移动代码后的里面的资源路径，会非常麻烦，使用路径别名之后就不需要在重新修改移动后的代码，修改路径别名的方式如下：

js 复制代码

resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

当然这里用到了path 模块，path模块是需要导入的

js 复制代码

import path from "path";

以上代码就将@作为了项目中src 目录的路径别名，当然你可以添加更多的路径别名

添加别名后的使用方式如下：

八、配置导入时需要省略的扩展名

vite 创建的项目中，配置省略的扩展名的方式如下：

js 复制代码

resolve: {
    extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
  },

使用效果如下：

九、build 常用配置

1. 修改打包后生成的根目录名称

vite 打包后生成的根目录名称默认是dist, 若想改成其他的名称可以通过build 下的outDir进行自定义

js 复制代码

build: {
    outDir: "product",
  },

默认情况下的：

修改之后的

2、指定生成静态资源的存放路径

vite 打包默认放置在assets下面，若想更改为其他的目录名称下面，可以通过build 下的assetsDir进行更改，比如下面的是更改为static:

js 复制代码

build: {
    assetsDir: "static",
  },

更改前：

更改后：

3. 打包阈值配置

vite 通过 build 下的assetsInlineLimit 配置打包阈值，小于这个值的静态资源会被打包成base64便编码，大于这个配置的值的还是以文件的形式存在。默认值如下4kb,具体配置如下：

js 复制代码

build: {
    assetsInlineLimit: 4 * 1024,
  },

项目中引入两张图片，一张小于4kb,一张大于4kb

打包后效果如下,可以看到小于4kb 的在文件中不存在，大于4kb 图片仍然以文件的形式存在。

十、配置环境变量

在项目开发中，我们往往需要在不同环境配置不同的需求，比如请求的api地址，可能在开发环境，测试环境，生产环境域名都相同，如果我们每次发布不同环境都手动去修改的话会非常麻烦，且容易忘记，这个时候就可以使用环境变量来解决这个问题。在vite 项目中配置环境变量常用的方式是以不同文件的形式来进行配置。比如开发环境.env.development, 测试环境.env.test, 生产环境： .env.production, 所有的环境公用的直接.env即可。添加了不同文件的配置之后，还需在packages.json中 scripts 中配置mode参数进区分。来看看具体的使用：

新增文件结构如下：

.env

js 复制代码

VITE_BASE_URL=http://base.vite.com

.env.development

js 复制代码

VITE_API=http://dev.api.com

.env.production

js 复制代码

VITE_API=http://product.api.com

.env.test

js 复制代码

VITE_API=http://test.api.com

packages.json中的命令添加mode 参数：

js 复制代码

"scripts": {
    "dev": "vite --mode development",
    "test": "vite build --mode test",
    "build": "vite build --mode production",
    "preview": "vite preview"
  },

在页面中使用：

js 复制代码

console.log("不同环境的api配置:", import.meta.env.VITE_API);
console.log("所用环境的公共配置:", import.meta.env.VITE_BASE_URL);

执行命令：pnpm run dev查看开发环境打印结果：

执行命令： pnpm run test 打包测试环境，然后执行pnpm run preview预览测试环境效果：

执行命令： pnpm run build打包到生产环境，然后执行pnpm run preview 预览生产环境效果：

十一、总结

vite.config.js中常用配置汇总如下：

js 复制代码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import VueDevTools from "vite-plugin-vue-devtools";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import path from "path";

export default defineConfig({
  plugins: [
    vue(), // 解析.vue文件
    VueDevTools(), // 集成vue调试工具
    AutoImport({
      // 配置自动导入的库方法
      imports: ["vue"],
    }),
    Components({
      // 配置一些ui 组件库的自动导入
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: "8000", // 修改端口号，默认是5173
    proxy: {
      // 配置代理，一般在开发环境和后端联调时使用
      "/api": {
        target: "http://localhost:9000",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  base: "/member", // 配置基础路径
  define: {
    // 配置全局变量
    APP_VERSION: JSON.stringify("1.0.0.0"),
  },
  publicDir: "static", // 配置静态文件目录，打包时不做处理，直接复制到打包后的根目录
  resolve: {
    alias: {
      // 配置路径别名
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"], // 配置导入时可以省略的扩展名
  },
  build: {
    assetsInlineLimit: 4 * 1024, // 打包阈值配置，小于这个值的会以base64的形式打包代码中，大于的则还是以文件的形式存在
    assetsDir: "static", // 指定生成静态资源的存放路径
    outDir: "product", // 修改打包后生成的根目录名称,
  },
});

2025年Vue3项目最常用的Vite配置

一、 创建项目

二、常用的插件

三、server 配置

1. 配置代理

2. 修改端口号

四、基础路径配置

五、定义全局变量

六、配置静态资源文件夹

七、配置路径别名

八、 配置导入时需要省略的扩展名

九、build 常用配置

1. 修改打包后生成的根目录名称

2、指定生成静态资源的存放路径

3. 打包阈值配置

十、配置环境变量

十一、总结

一、创建项目

八、配置导入时需要省略的扩展名