vue3+vite常用的vite.config.js配置

前言

文章vite版本基于: "^2.0.5"，Vite 2.0 core 现在与框架无关。现在通过@vitejs/plugin-vue这个插件来支持Vue。

npm i @vitejs/plugin-vue
or
yarn add @vitejs/plugin-vue

然后在vite.config.js中导入这3个依赖

import { defineConfig } from "vite";  // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import { resolve } from "path"; // 主要用于alias文件路径别名
import vue from '@vitejs/plugin-vue'; 

然后基于resolve写个小方法，方便以后新增别名使用(非必要)

function pathResolve(dir) {
  return resolve(__dirname, ".", dir);
}

接下来进入重要环节

配置信息

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

// https://vitejs.dev/config/
export default defineConfig({
  // 插件配置
  plugins: [vue()],
  //设置的别名 
  resolve: {
    // 如果报错__dirname找不到，需要安装node,
    // 执行npm i @types/node --save-dev
    alias: {
      '@': path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
      "@common": path.resolve(__dirname, "./src/common"),
      "@utils": path.resolve(__dirname, "./src/utils"),
      "@components": path.resolve(__dirname, "./src/components"),
      "@views": path.resolve(__dirname, "./src/views"),
      "@styles": path.resolve(__dirname, "./src/styles"),
    },
  },
    // 服务配置
  server:{    
    port:3000,// 端口号    
    open:true,// 自动在浏览器打开    
    https:false,// 是否开启 https
  },
  // css 处理
  css:{
    preprocessorOptions: {
            scss: {
                /* .scss全局预定义变量，引入多个文件 以;(分号分割)*/
                additionalData: `@import "./src/styles/css/global.scss";`,
            },
        },
  },
  //  生产环境
  build: {
    //指定输出路径
    assetsDir: "./",
    // 指定输出文件路径
    outDir: "dist",
    // 代码压缩配置
    terserOptions: {
      // 生产环境移除console
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  },
});

以上就是vite.config.js文件的基本配置，需要更多配置的可以参考文档进行配置

下面附上我自己的完整代码

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import vueI18n from "@intlify/vite-plugin-vue-i18n";
import viteCompression from "vite-plugin-compression";
const alias: Record = {
  "@": path.resolve(__dirname, "./src"),
  //解决vue-i18n的警告
  "vue-i18n": "vue-i18n/dist/vue-i18n.runtime.esm-bundler.js",
  // 'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
};

export default ({ mode }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  const publicPath = process.env.VITE_BASE_URL;

  return defineConfig({
    base: publicPath, //打包路径
    server: {
      fs: {
        // 可以为项目根目录的上一级提供服务
        allow: [".."],
      },
      proxy: {
        "^/mockapi": {
          target: "http://10.32.38.100:3000/",
          changeOrigin: true,
        },
        "/open-service/v1/ops/": {
          target: "http://10.32.38.100:8080",
          changeOrigin: true,
        },
        "/app/v1/exploreservice/": {
          target: "http://10.32.38.100:8080",
          changeOrigin: true,
        },
        "/legal/service/privacy-statement.htm/": {
          target: "https://privacy-cn.cloudtest.cn:44444",
          changeOrigin: true,
        },
        "/open-service/": {
          // target: 'http://10.33.124.175:8888',
          // 11443测试环境
          target: "http://10.33.124.154:8888",
          changeOrigin: true,
        },
      },
    },
    resolve: {
      alias,
    },
    build: {
      cssCodeSplit: false,
      rollupOptions: {
        output: {
          manualChunks(id, { getModuleInfo, getModuleIds }) {
            if (id.includes("node_modules")) {
              return "vendor";
            }

            if (
              id.toLocaleLowerCase().includes("search") ||
              id.includes("MapAppIcon") ||
              id.includes("DownloadBanner") ||
              id.includes("/main/index") ||
              id.includes("/layout/index") ||
              id.includes("BottomMenu") ||
              id.includes("en.json") ||
              id.includes("swiper")
            ) {
              return "main";
            }
          },
        },
      },
    },
    plugins: [
      vue(),
      vueI18n({
        include: path.resolve(__dirname, "./src/common/i18n/langs/*"),
      }),
    ],
    css: {
      // css预处理器
      preprocessorOptions: {
        scss: {
          charset: false,
          additionalData: '@import "./src/assets/style/global.scss";',
        },
      },
    },
  });
};

以上只供参考，切莫直接复制，根据自己的项目情况而定，但大同小异

参考资料：
vite中文网文档地址：vite中文网

点赞加关注，永远不迷路