vite.config.ts配置

Alan-Xia

已于 2024-04-26 10:25:21 修改

阅读量1.2k

点赞数 6

文章标签： javascript vue.js vue 前端前端框架

于 2024-04-26 10:06:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44072254/article/details/138210447

版权

本文介绍了如何使用Vite构建一个Vue应用，包括引入SVG图标、自动导入模块、配置服务器跨域、以及在开发环境中处理SCSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
//* 导入icon
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
//* 自动导入模块
import autoImport from 'unplugin-auto-import/vite'


// https://vitejs.dev/config/
export default defineConfig((commad, mode, isSsrBuild, isPreview) => {
  /**
   * command === 'serve'  // dev 独有配置; command === 'build' // build 独有配置
   * isSsrBuild 和 isPreview 是额外的可选标志，用于区分 build 和 serve 命令的类型。
   * 一些加载 Vite 配置的工具可能不支持这些标志，而会传递 undefined。因此，建议使用 true 和 false 的显式比较。
   */

  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  // const env = loadEnv(mode, process.cwd(), '')
  return {
    // define: {
    //   __APP_ENV__: JSON.stringify(env.APP_ENV),
    // },
    plugins: [
      vue(),
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
      // 自动导入相应模块
      autoImport({
        imports: [
          'vue-router',
          'vue',
          'pinia'
        ]
      }),
      vitePluginInspect()
    ],
    base: '/', // url路径是否要加前缀，如:/build/XXX;默认没前缀的；可以查看vite官网的部署静态站点里面的GitHub Pages
    resolve: {
      alias: {
        '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
      },
    },
    // 构建配置
    build: {
      // 输出目录，默认是 dist
      outDir: 'project',
      // 此选项允许用户覆盖 CSS 最小化压缩的配置，而不是使用默认的 build.minify，这样你就可以单独配置 JS 和 CSS 的最小化压缩方式。Vite 默认使用 esbuild 来最小化 CSS。 
      // cssMinify: true
    },
    // 开发环境跨域解决
    server: {
      open: true,
      // port: 3000,
      proxy: {
        '^/maps': {
          target: 'http://webapi.amap.com/',
          changeOrigin: true
        }
      }
    },
    css: {
      preprocessorOptions: {
// 全局引用scss
        scss: {
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    }
  }
})