vite.config.js配置入门详解

一，搭建vite项目

　　兼容性注意：Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

　　通过下面的命令行可以创建指定项目名称和你想要使用的模板的vue项目

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

　　或者直接使用vue3的脚手架项目，vue3官方的脚手架项目是vite搭建的。

　　vue3的搭建过程可以在我以前的文章中查看：vue3+vant+vue-router+axios+pinia+vite框架搭建；

二，vite.config.js配置

　　vue3脚手架搭建之后，根目录下面会有vite.config.ts配置文件，vite的配置信息需要在这个文件里面进行。

　　

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import { fileURLToPath, URL } from 'node:url';


export default defineConfig({
    plugins: [vue()],
    //静态资源服务的文件夹
    publicDir: "public",
    base: './',
    resolve:{
        alias:{
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            "@_c":path.resolve('src/components'),

        },
        // 导入时想要省略的扩展名列表
        extensions:['.mjs','.js','.ts','.jsx','.tsx','.json'],
    },
    //预览设置  npm run build　打包之后，会生成dist文件 然后运行npm run preview；vite会创建一个服务器来运行打包之后的文件
    preview:{
        port: 4000,//端口号
        host: 'localhost',
        open: true,//是否自动打开浏览器
    },
    //开发配置  npm run dev
    server: {
        port: 3001,//端口号
        strictPort: true,//是否是严格的端口号，如果true，端口号被占用的情况下，vite会退出
        host: 'localhost',
        cors: true,//为开发服务器配置 CORS , 默认启用并允许任何源
        https: false,//是否支持http2 如果配置成true 会打开https://localhost:3001/xxx;
        open: true,//是否自动打开浏览器
        // 反向代理 跨域配置
        proxy: {
            '/api': {
                target: "https://xxxx.com/",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },
    // 打包配置 npm run build
    build:{
        //指定输出路径
        outDir: "dist",
        //生成静态资源的存放路径
        assetsDir: "assets",
        //小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
        assetsInlineLimit: 4096,
        //启用/禁用 CSS 代码拆分
        cssCodeSplit: true,
        //构建后是否生成 source map 文件
        sourcemap: false,
        //自定义底层的 Rollup 打包配置
        rollupOptions: {
            input:{//可以配置多个，表示多入口
                index:path.resolve(__dirname,"index.html"),
                // project:resolve(__dirname,"project.html")
            },
            output:{
                // chunkFileNames:'static/js/[name]-[hash].js',
                // entryFileNames:"static/js/[name]-[hash].js",
                // assetFileNames:"static/[ext]/name-[hash].[ext]"
            }
        },
        //默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录。
        emptyOutDir: true,
        //chunk 大小警告的限制
        chunkSizeWarningLimit: 500
    }
})

　　上面就是我总结的经常会用到的vite.config.ts的配置项。希望大家指证