vite 项目 vite.config.js 文件基本配置

71 阅读 0 评论 47 点赞

我是靠谱客的博主天真睫毛，最近开发中收集的这篇文章主要介绍vite 项目 vite.config.js 文件基本配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

Vite具有以下特点：

快速的冷启动
即时热模块更新（HMR，Hot Module Replacement）
真正按需编译
Vite是在推出Vue 3的时候开发的，目前支持的模板预设包括：
vanilla
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
vite.config.js在项目根目录下为vite项目的配置文件,Vite构建的项目都会有一个初始配置只有一个插件,不满足我们开发需求,
这里记录一下,我的基础配置:

import { defineConfig } from 'vite' // 使用 defineConfig 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import vue from '@vitejs/plugin-vue'
const { resolve } = require("path");

export default ({ command, mode }) => {
  let isProd = (command === 'serve') // 情景配置 是否为开发模式  serve 或 build
  return defineConfig({
    plugins: [vue()], //查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"), // 设置为@ 则使用时为 "@/components/index.module.css"
        "@components": resolve(__dirname, "./src/components"), // 使用时为 "@components/HelloWorld.vue"
    },
    },
    server: {
      port: 8006, // 本地服务端口
      open: true, //在服务器启动时自动在浏览器中打开应用程序。当此值为字符串时，会被用作 URL 的路径名。
      strictPort:true, // 设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口
      proxy: { // 代理 
         // 字符串简写写法
        // '/foo': 'http://localhost:4567/foo',
        // 选项写法
        // '/api': {
        //   target: 'http://jsonplaceholder.typicode.com',
        //   changeOrigin: true,
        //   rewrite: (path) => path.replace(/^/api/, '')
        // },
        // 正则表达式写法
        // '^/fallback/.*': {
        //   target: 'http://jsonplaceholder.typicode.com',
        //   changeOrigin: true,
        //   rewrite: (path) => path.replace(/^/fallback/, '')
        // }
    
      }
    },
    build:{
      // outDir: '', //指定输出路径（相对于 项目根目录). 建议使用系统默认
      // assetsDir:'', // 指定生成静态资源的存放路径（相对于 build.outDir）
    }
  })
}