vite常用配置

最新推荐文章于 2025-11-13 11:20:25 发布

原创

最新推荐文章于 2025-11-13 11:20:25 发布 · 1w 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#vite常用配置 #vue

本文详细介绍了如何配置Vite环境，包括SCSS预处理器的使用、样式前缀自动添加、Vue Router路由管理、axios和Vuex状态管理，以及Element Plus组件库的引入和alias别名设置。

vite基本配置

文章目录

- vite基本配置

scss预处理器

无需下载node-sass、 sass-loader包，直接安装sass
同样的less、 stylus 也是直接安装

// .scss and .sass
npm i sass -D


// .less
npm i less -D


// .styl and .stylus
npm i stylus -D

引入全局scss样式，在vite.config.js中配置

preprocessorOptions: {
   
   
    scss: {
   
   
        additionalData: "@import './src/assets/style/mixin.scss';"
    }
}

使用

<style lang="scss" scoped>
	img {
        width: $width;
    }
    #wrap {
        width: calc(100% - #{$width});
    }
</style>

样式自动添加前缀

安装

npm install autoprefixer postcss -D

可以在vite.config.js文件中配置或新建 postcss.config.js配置文件，配置如下

// vite.config.js 配置
css: {
   
   
    postcss: {
   
   
        plugins: [
            require('autoprefixer')
        ]
    }
},

// postcss.config.js
module.exports = {
   
   
    plugins: [
        require('autoprefixer')
    ]
}

vue-router

安装 vue-router

npm install vue-router@4 -S

在App.vue 中将组件映射到路由上

<template>
	<router-view></router-view>
</template>

定义路由组件，新建router文件夹下为index.js

import {
   
    createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 定义路由
const routes = [
    {
   
   
        path: '/',
        redirect: '/index'
    },
    {
   
   
        path: '/index',
        name: 'index',
        component: