vue3-vite-less-配置别名-多环境

在Vue 3 + Vite项目中配置Less并设置别名，同时支持多环境配置，你可以按照以下步骤操作：

1. 安装依赖：

npm install less --save-dev
npm install less-loader --save-dev

2. 在vite.config.js中配置Less和别名：

import { defineConfig } from 'vite';
import path from 'path';
 
export default defineConfig(({ mode }) => {
  // 多环境配置
  const env = loadEnv(mode, process.cwd());
 
  return {
    // ... 其他配置
    css: {
      preprocessorOptions: {
        less: {
          // 配置别名
          additionalData: `@import "@/styles/variables.less";`,
        },
      },
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        // 其他别名
      },
    },
    // 环境变量
    server: {
      host: env.VITE_HOST,
      port: env.VITE_PORT,
    },
  };
});

3. 在env.example文件中定义环境变量：

VITE_HOST=0.0.0.0
VITE_PORT=3000

4. 在.env文件中设置具体的环境变量值：

VITE_HOST=0.0.0.0
VITE_PORT=3000

5. 在src/styles/variables.less中定义全局变量：

@primary-color: #3498db;

6. 在组件中使用别名引用资源：

<template>
  <div :style="{ color: primaryColor }">Hello, Vue 3!</div>
</template>
 
<script setup>
import { ref } from 'vue';
import '@/styles/global.less';
 
const primaryColor = ref('@primary-color');
</script>

以上步骤展示了如何在Vue 3 + Vite项目中配置Less别名，并根据不同环境设置不同的环境变量。