vite基本配置

相关文档

vue3文档

vite中文网

提示：

1. 安装包可通过npm 或 yarn方式安装
2. 我目前安装的vite版本是^2.1.5， 配置仅供参考

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: () => import('@/view/index.vue')
    }
]


//  创建路由实例并传递 `routes` 配置
const router = createRouter({
    // 内部提供了 history 模式的实现
    // history: createWebHistory(),
    history: createWebHashHistory(),
    routes
})


export default router;

• 创建并挂载根实例， 在main.js中

// 1. 引入router文件
import router from '@/router'

// 2. use路由
const app = createApp(App);
app.use(router);
app.mount('#app');

// 注意： 把原来创建项目生成注释 
// createApp(App).mount('#app')

• 正常，应用可以正常访问了。

注意：

• routes 引入组件路径时，必须要有.vue后缀， 否则报错。

• 查看vue-router版本： npm info vue-router versions

axios

• 安装

npm i axios -S

vuex

• 安装

npm i vuex@next -S

vant

npm i vant@next -S

element-plus

element-plus

• 安装

npm install element-plus -S

• 在 main.js中引入【此方式是完整引入】

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

app.use(ElementPlus)

• 按需引入有以下两种方式：
  1. 使用官网方式 vite-plugin-style-import
  2. 使用vite-plugin-imp 插件
  3. 如果使用按需引入的方式， 在main.js中 无需引入整个Element Plus 及样式文件。

vite-plugin-imp

一个自动导入组件库样式的vite插件。

• 安装

npm i vite-plugin-imp -D

• vite.config.js 文件配置

import vitePluginImp from 'vite-plugin-imp'

plugins: [
    vue(), 
    vitePluginImp({
        libList: [
            {
                libName: 'vant',
                style(name) {
                    if (/CompWithoutStyleFile/i.test(name)) {
                        // This will not import any style file 
                        return false
                    }
                    return `vant/es/${name}/style/index.js`
                }
            },
            {
              libName: 'element-plus',
              style: (name) => {
                return`element-plus/lib/theme-chalk/${name}.css`
              }
            }
        ]
    })
],

• 使用

<template>
    <div class="indexWrap">
        <Progress percentage="15"></Progress>
        <Button type="warning">vant button</Button>
    </div>
</template>

<script>
    import { Progress, Button } from 'vant'

    export default {
        components: {
            Button,
            Progress
        },
    }
</script>

alias别名配置

• 在vite.config.js配置

resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src'),
        'views': path.resolve(__dirname, 'src/view'),
    }
},
    
// 也可以使用数组方式
resolve: {
    alias: [{
            find: '@',
            replacement: path.resolve(__dirname, 'src')
        },
        {
        	find: 'views',
          	replacement: path.resolve(__dirname, 'src/view')
        }
	],
},

• 使用， 通过别名/

import router from '@/router'

vite.config.js一些配置

export default defineConfig({
    plugins: [
        vue(),
        vitePluginImp({
            libList: [
                {
                    libName: 'vant',
                    style(name) {
                        if (/CompWithoutStyleFile/i.test(name)) {
                            // This will not import any style file 
                            return false
                        }
                        return `vant/es/${name}/style/index.js`
                    }
                },
                {
                  libName: 'element-plus',
                  style: (name) => {
                    return`element-plus/lib/theme-chalk/${name}.css`
                  }
                }
            ]
        })
    ],
    base: './',
    // 静态资源服务的文件夹，默认public
    publicDir: 'public',
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        },
        extensions: ['.js', '.vue', '.json', '.scss', '*']
    },
    css: {
        // 引入 autoprefixer
        postcss: {
            plugins: [
                require('autoprefixer')
            ]
        },
        // 引入全局 scss
        preprocessorOptions: {
            scss: {
                additionalData: "@import './src/assets/style/mixin.scss';"
            }
        }
    },
    server: {
        // 服务器主机名，如果允许外部访问，可设置为"0.0.0.0"
        host: '0.0.0.0',
        port: 56438, // 服务器端口号
        open: false, // 是否自动打开浏览器
        // 代理
        proxy: {
            '/api': {
                target: 'http://xxx.xxx.xx',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    }
});