有webpack，我就不用，我干嘛，我玩vite2，哎就是玩儿

vite出来一段时间了，听说构建速度飞起，这两天也自己试了一下，真香！！！ 下面贴出一下常用配置，如有错误，请大佬们指出，更详细的配置请移步vite官网。

1.resolve.alias 设置文件路径别名

示例如下：

import path from 'path'
....
resolve:{
    alias: {
      '@':path.resolve(__dirname, "src"),
      "comp":path.resolve(__dirname, "src/components"),
    },
  },

2.css.preprocessorOptions 指定传递给 CSS 预处理器的选项

示例如下：

css:{
    preprocessorOptions:{
      scss:{
        additionalData: `
                          @import "@/assets/css/common.scss";
                          @import "@/assets/css/antd-theme.scss";
                          @import "@/assets/css/variable.scss";
                        `
      }
    }
  },

3.Server Options

1). server.host

    指定服务器主机名。

2). server.port

    指定服务器端口。

3). server.strictPort

  默认为false,设置为true时端口被占用则会直接退出，否则会尝试下一个可用端口。

4). server.proxy

 为开发服务器配置自定义代理规则。

示例如下：

server: {
    host:'172.17.35.29',
    port:8080,
    strictPort:true,
    proxy: {
     '^/api/.*': {
        target: 'http://www.baidu.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },

4.组件样式按需加载配置

示例如下:

import styleImport from 'vite-plugin-style-import'
···
plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })
  ],

第一次使用Vite2构建项目，第一个感觉就是快，非常快。 附录：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import styleImport from 'vite-plugin-style-import'


export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })
  ],
  build:{
    outDir:'template'
  },
  resolve:{
    alias: {
      '@':path.resolve(__dirname, "src"),
      "comps":path.resolve(__dirname, "src/components"),
    },
  },
  css:{
    preprocessorOptions:{
      scss:{
        additionalData: `
                  @import "@/assets/css/common.scss";
                  @import "@/assets/css/antd-theme.scss";
                `
      }
    }
  },
  server: {
    host:'172.17.35.29',
    port:9009,
    strictPort:true,
    proxy: {
     '^/api/.*': {
        target: 'http://www.baidu.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
  },
})