vue-advertisement/vite.config.js

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import compression from 'vite-plugin-compression';
import autoprefixer from 'autoprefixer'; // css自动添加兼容性前缀
import pxtorem from 'postcss-pxtorem'
import path from 'path';

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    base: '/',
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    // https://cn.vitejs.dev/config/#resolve-extensions
    plugins: createPlugins(env),

    // 开发或者测试环境未配置跨域cors头信息，需要本地做代理
    server: {
      host: '0.0.0.0',
      port: Number(env.VITE_APP_PORT),
      open: true,
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: 'http://111.62.22.190:8080', // 测试环境
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), ''),
          bypass(req, res, options) {
            const proxyURL = options.target + options.rewrite(req.url);
            // console.log('请求的真实api地址===>', proxyURL);
            res.setHeader('x-req-proxyURL', proxyURL); // 设置真实请求地址,便于开发联调
          }
        }
      }
    },
    css: {
      preprocessorOptions: {
        less: {
          less: {
            // 在这里添加全局的 Less 变量或混入
            // additionalData: `@import "@/styles/variables.less";`,
            // 其他 Less 配置选项
            math: 'always', // 启用 Less 数学运算
            javascriptEnabled: true, // 允许 Less 中使用 JavaScript 表达式
          }
        }
      },
      postcss: {
        plugins: [
          // 浏览器兼容性
          autoprefixer(),
          {
            postcssPlugin: 'internal:charset-removal',
            AtRule: {
              charset: (atRule) => {
                atRule.remove();
              }
            }
          },
          // 适配设计稿像素
          pxtorem({
            rootValue: 100,
            propList: ['*'],
            selectorBlackList: [],
            minPixelValue: 2
          })
        ]
      }
    },
    // 预编译
    optimizeDeps: {
      include: [
        'vue',
        'vue-router',
        'pinia',
        'axios',
      ]
    }
  };
});

const createPlugins =(env)=> {
  const vitePlugins = [];
  vitePlugins.push(vue());
  vitePlugins.push(vueDevTools());
  if(env.VITE_BUILD_COMPRESS){
    vitePlugins.push(
        compression({
          ext: '.gz',
          deleteOriginFile: false
      })
    );
  }
  return vitePlugins;
};