这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战

前言

随vue3的盛行，我们通过vite做项目的必要性也在提升，那还不学一首vite配置，我们一起来看看吧。

base

首先先介绍一下base 打包公共路径,比如：

base:'./'

alias

配置别名

举例：

resoolve:{

alias:{

    comp : resolve(__dirname.'src/component/index'),
       //组件的别名

     'icon'：'./src/assets/image/icon',
         //静态资源的别名

}

}

build

terserOptions

生产环境移出console.log的配置

        minify: 'terser',
        terserOptions: {
            compress: {
                //生产环境时移除console
                drop_console: true,
                drop_debugger: true,
            },
        },

rollupOptions

打包输出文件夹的配置

js，css， images各自放一块

          output: {
               chunkFileNames: 'static/js/[name]-[hash].js',
               entryFileNames: 'static/js/[name]-[hash].js',
               assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
           },

plugin

element-plus

具体参照element官网

mock

使用插件是还是要去官网查的

npm i vite-plugin-mock mockjs  -D

server

proxy配置的前端跨域代理，也有正则表达式的配置，根据自己喜好进行配置吧。

    server: {
        proxy: {
            '/ss': {
                target: 'https://saucenao.com/search.php?db=999&output_type=2&url=https://pica.zhimg.com/v2-178387c7e8e907910d715e890bfd7519_1440w.jpg?source=172ae18b&api_key=33d4bee5c19583cd3756ee47f2ebef8edd5bef7e',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^/ss/, ''),
            },
        },
    },

.env.production /.env.devolpment

env环境变量的配置

VITE_BASE_API=/api

VITE_BASE_API=https://www.manga2020.com/api/v3/comic/hydxjxrwgb/chapter/cb321fca-c608-11e8-879b-024352452ce0?timeout=10000

CDN

importCDNto

引入CDN 具体还是去github上查阅文档

npm install vite-plugin-cdn-import --save-dev

代码压缩

(压缩体积)

npm i vite-plugin-compression -D

        viteCompression({
            //生成压缩包gz
            verbose: true,
            disable: false,
            threshold: 10240,
            algorithm: 'gzip',
            ext: '.gz',
        }),

打包图片

对图片进行打包的图片；配置如下：

cnpm i vite-plugin-imagemin@0.4.6 -D

        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false,
            },
            optipng: {
                optimizationLevel: 7,
            },
            mozjpeg: {
                quality: 50,
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4,
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox',
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false,
                    },
                ],
            },
        }),

格式化

这是代码的格式化配置：

npm i eslint prettier @typescript-eslint/eslint-plugin  @typescript-eslint/parser @vue/eslint-config-prettier @vue/eslint-config-typescript  babel-eslint eslint-config-prettier  eslint-plugin-prettier eslint-plugin-vue -D

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        'eslint:recommended',
        '@vue/typescript/recommended',
        '@vue/prettier',
        // '@vue/prettier/@typescript-eslint',
    ],
    parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
    },
    rules: {
        'prettier/prettier': 'error',
        '@typescript-eslint/no-explicit-any': ['off'],
        '@typescript-eslint/indent': ['off'],
        '@typescript-eslint/no-unused-vars': ['error'],
    },
    globals: {
        defineProps: 'readonly',
        defineEmits: 'readonly',
        defineComponent: 'readonly',
        defineExpose: 'readonly',
    },
}

module.exports = {
    printWidth: 80,
    tabWidth: 4,
    useTabs: false,
    singleQuote: true,
    semi: false,
    trailingComma: 'es5',
    bracketSpacing: true,
    jsxBracketSameLine: false,
    arrowParens: 'avoid',
    endOfLine: 'auto',
}

总结：vite配置和之前学过的打包工具，如webpack差别不大，还是那句话，一步步来，加油！

vite配置详解

前言