suqian_pc/vite.config.ts

/*
 * @Author: jixiang
 * @Date: 2021-07-07 15:19:05
 * @Description: 配置中心
 * @FilePath: /suqian_pc_new/vite.config.ts
 * One World One Drefeel(56580223@qq.com)
 */
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

// import path from 'path';
import path, { resolve } from 'path'; // 主要用于alias文件路径别名
// https://vitejs.dev/config/

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
  remUnit: 16, // 基准大小 baseSize，需要和rem.js中相同
});

const setAlias = (alias: [string, string][]) =>
  alias.map((v) => {
    return { find: v[0], replacement: path.resolve(__dirname, v[1]) };
  });

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/css`;
          },
        },
      ],
    }),
  ], // 配置需要使用的插件列表，这里将vue添加进去
  // 配置文件别名 vite1.0是/@/  2.0改为/@
  // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
  resolve: {
    alias: setAlias([['@', 'src']]),
  },
  // 强制预构建插件包
  optimizeDeps: {
    include: ['axios'],
  },
  // 打包配置
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    manifest: false,
    minify: 'terser', // 混淆器，terser构建后文件体积更小
    rollupOptions: {
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
  },
  publicDir: false,
  /**
   * 在生产中服务时的基本公共路径。
   * @default '/'
   */
  base: './',
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve('src/styles/antd.less')}";`,
        },
        javascriptEnabled: true,
      },
    },
    postcss: {
      plugins: [postcss],
    },
  },

  // 本地运行配置，及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
    // proxy: {
    //     '/api': {
    //         target: 'http://192.168.99.223:3000',   //代理接口
    //         changeOrigin: true,
    //         rewrite: (path) => path.replace(/^\/api/, '')
    //   }
    // }
  },
});