vue3搭建vite.config.ts完整代码

vue3搭建vite.config.ts完整代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';   // 编辑器提示 path 模块找不到，可以npm install @types/node --save-dev 即可
import { viteMockServe } from 'vite-plugin-mock'
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/variables.scss" as globalScss;
          @use "./src/styles/element-variables.scss" as *;
        `, // 引入自定义主题文件和全局的scss变量文件  => 必须使用@use
      }
    }
  },
  //配置别名路径
  resolve:{
    alias:{
      "@":resolve(__dirname,"src"),// 配置别名；将 @ 指向'src'目录
      "@c":resolve(__dirname,"src/components"),
      "/images":"src/assets/images/"//这里不能通过path模块解析路径的写法
    }
  },
  build: {
    target: "modules", //设置最终构建的浏览器兼容目标  //es2015(编译成es5) | modules
    outDir: "dist", // 构建得包名  默认：dist
    assetsDir: "assets", // 静态资源得存放路径文件名  assets
    sourcemap: false, //构建后是否生成 source map 文件
    minify: "esbuild", // 项目压缩 :boolean | 'terser' | 'esbuild'  // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
    chunkSizeWarningLimit: 1000, //chunk 大小警告的限制（以 kbs 为单位）默认：500
    cssTarget: "chrome61", //防止 vite 将 rgba() 颜色转化为 #RGBA 十六进制符号的形式  (要兼容的场景是安卓微信中的 webview 时,它不支持 CSS 中的 #RGBA 十六进制颜色符号)
  },
  plugins: [
    vue(),
    viteMockServe({
      mockPath: './mock/',//设置模拟数据的存储文件夹
      //@ts-ignore
      supportTs: true,//是否读取ts文件模块
      logger:true,//是否在控制台显示请求日志
      localEnabled: true,//设置是否启用本地mock文件
      prodEnabled:true//设置打包是否启用mock功能
    }),
    Components({ // 重新配置 Components
      resolvers: [
        ElementPlusResolver({ // 实现按需加载并自定义主题
          importStyle: "sass",
        }),
      ],
      dts: "src/components.d.ts"
    }),
  ],
  server: {
    port: 3000,       // 设置服务启动的端口号；如果端口已经被使用，Vite 会自动尝试下一个可用的端口
    open: true,       // 服务启动后自动打开浏览器
    // proxy: {          // 代理
    //   '/api': {
    //     target: '真实接口服务地址',
    //     changeOrigin: true,
    //     rewrite: (path) => path.replace(/^\/api/, '')     // 注意代理地址的重写
    //   },
    //   // 可配置多个... 
    // }
  }
})