Vite8的项目中集成CSS预处理器编译器SCSS 集成Mock工具

Vite8的项目中集成SCSS

Dart Sass编译器，Sass官方主推的CSS预处理器编译器，安装：npm install sass，且同时支持Sass（.sass）和SCSS（.scss）这两种语法格式，前端开发中，SCSS是事实上的默认选择。

Vite8集成SCSS：

复制代码

# 开发依赖（推荐，只用于编译）
pnpm add -D sass
# 或简写
pnpm install sass -D

src/assets/vars.scss

复制代码

$primary: #409eff;
$success: #67c23a;
$warning: #e6a23c;
$danger: #f56c6c;

vite.config.js

复制代码

  resolve: {
    alias: {
      // @ 直接等价 src文件夹
      '@': path.resolve(__dirname, './src')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动注入全局变量
        additionalData: `@use "@/assets/vars.scss" as *;`,
        // Vite8建议用modern编译器（可选）
        api: 'modern-compiler'
      }
    }
  },

src/App.vue

复制代码

<template>
  <div>
    <div class="box">
      <p class="text">hello scss</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  background: $success;
  color: $primary;
  padding: 20px;

  .text {
    color: red;
    font-size: 20px;
  }
}
</style>

启动：pnpm dev

集成Mock工具

Mock，英文原意是"模拟的"，在软件开发中，它通常指模拟数据或虚拟对象。

Mock.js是一款由阿里巴巴团队开发的JavaScript库，主要用于前端开发中模拟后端接口返回的数据。核心价值在于解决前后端分离开发模式下，前端开发者常面临的"后端接口未就绪"的困境，让前端开发实现"无接口也可开发"。

安装依赖：

复制代码

pnpm add -D mockjs vite-plugin-mock
# axios
pnpm add axios

vite.config.js中配置：

复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    // Vite插件数组:  Vue支持
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock',     // 根目录下的 mock 文件夹
        localEnabled: command === 'serve', // 仅开发启用
        prodEnabled: false,   // 生产关闭
        watch: true,          // mock 文件改动自动刷新
        logger: true          // 控制台打印请求日志
      }
      )
    ],
    // 开发服务器配置
    server: {
      open: true,       // ✅ 启动自动打开浏览器
      port: 5173,       // 自定义端口
      host: '0.0.0.0'   // 局域网手机可访问
    },
    resolve: {
      alias: {
        // @ 直接等价 src文件夹
        '@': path.resolve(__dirname, './src')
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 自动注入全局变量
          additionalData: `@use "@/assets/vars.scss" as *;`,
          // Vite8建议用modern编译器（可选）
          api: 'modern-compiler'
        }
      }
    },
  }
})

mock/user.js

复制代码

export default [
  {
    url: '/api/user/info',
    method: 'get',
    response: () => {
      return {
        code: 200,
        message: 'success',
        data: {
          id: 1,
          username: 'test',
          nickname: '测试用户',
          avatar: 'https://picsum.photos/200'
        }
      }
    }
  },
  {
    url: '/api/login',
    method: 'post',
    response: ({ body }) => {
      return {
        code: 200,
        message: '登录成功',
        data: {
          token: 'mock-token-123',
          user: body
        }
      }
    }
  }
]

src/App.vue

复制代码

<template>
  <div class="app">
    <h3>Mock 测试</h3>
    <button @click="getUserInfo">获取用户信息</button>
    <button @click="login">登录</button>
    <pre>{{ res }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const res = ref('')

const getUserInfo = async () => {
  const r = await axios.get('/api/user/info')
  res.value = JSON.stringify(r.data, null, 2)
}

const login = async () => {
  const r = await axios.post('/api/login', { username: 'test' })
  res.value = JSON.stringify(r.data, null, 2)
}
</script>

<style scoped lang="scss">
.app {
  padding: 20px;
  h3 {
    color: $primary;
  }
  button {
    margin-right: 10px;
  }
}
</style>

启动：pnpm dev