Vite + Vue2 + Unocss + Eslint + Prettier 接入指南

前言

项目比较新（基于Vue CLI），想着使用Vite替换Webpack，经过一番操作，最终达到效果

踩坑指南

1.首页问题

项目启动后发现404，其实是public下index.html需要移动到项目根目录下，其次 <%= BASE_URL %>得替换位绝对路径，然后引入 main.js，不然首页会白屏

2.环境变量替换（链接）

3.CSS import

4.Eslint

格式化：安装 @vue/babel-preset-app 替换 @vue/cli-plugin-babel/preset 不然Eslint格式化有问题，配置后Eslint格式化正常

5.Vite

文件后缀与alias问题，配置extensions后，import兼容可以省略.vue .js不然vite引用时会出现404

resolve: {
        extensions: ['.js', '.vue', '.jsx', 'tsx', '.json'],
        alias: {
            vue: 'vue/dist/vue.esm.js', // element-ui table显示问题 https://github.com/ElemeFE/element/issues/21984
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            'components': fileURLToPath(new URL('./src/components', import.meta.url))
        },
    },

正文：

1. 安装包

npm vite @vitejs/plugin-vue2 @vue/babel-preset-app unocss @unocss/eslint-config -S

{
    "name": "project name",
    "version": "4.2.0",
    "private": true,
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview",
        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
        "format": "prettier --write src/"
    },
    "dependencies": {
        "core-js": "^3.8.3",
        "vue": "^2.6.14",
    },
    "devDependencies": {
        "@babel/core": "^7.12.16",
        "@babel/eslint-parser": "^7.12.16",
        "@unocss/eslint-config": "^0.50.6",
        "@vitejs/plugin-vue2": "^2.2.0",
        "@vue/babel-preset-app": "^5.0.8",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^4.0.0",
        "eslint-plugin-vue": "^8.0.3",
        "prettier": "^2.4.1",
        "sass": "^1.32.7",
        "unocss": "^0.51.8",
        "vite": "^4.3.1",
        "vue-template-compiler": "^2.6.14"
    }
}

2. Vite配置

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import UnoCSS from 'unocss/vite';
// https://vitejs.dev/config/
export default defineConfig({
    base: process.env.NODE_ENV === 'production' ? '/paymentsystem/' : './',
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    whitespace: 'condense',
                },
            },
        }),
        UnoCSS(),
    ],
    resolve: {
        extensions: ['.js', '.vue', '.jsx', 'tsx', '.json'],
        alias: {
            vue: 'vue/dist/vue.esm.js', // element-ui table显示问题 https://github.com/ElemeFE/element/issues/21984
            '@': fileURLToPath(new URL('./src', import.meta.url)),
            components: fileURLToPath(new URL('./src/components', import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "@/assets/css/variables.scss";`,
            },
            sass: {
                sassOptions: { outputStyle: 'expanded' }, // 解决dart-sass导致的偶发性乱码
            },
        },
    },
    server: {
        port: '8088',
    },
    postcss: {
        plugins: {
            '@unocss/postcss': {
                // Optional
                content: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,css,scss}'],
            },
        },
    },
});

3. UnoCSS配置

// uno.config.js
import { defineConfig, presetUno, presetAttributify, transformerDirectives } from 'unocss';

export default defineConfig({
    // ...
    // include: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro,css,scss}', './src/**/*.vue',],
    include: [/(src).*.(s?css|vue|[jt]sx?)$/],
    exclude: [],
    presets: [
        presetAttributify({
            /* preset options */
        }),
        presetUno(),
        // ...custom presets
    ],
    transformers: [transformerDirectives()],
});

后续其他操作参考链接

4. ESLint配置

module.exports = {
    root: true,
    env: {
        node: true,
    },
    extends: ['eslint:recommended', 'plugin:vue/recommended', 'plugin:prettier/recommended', '@unocss'],
    parserOptions: {
        ecmaVersion: 'latest',
        parser: '@babel/eslint-parser',
    },
    rules: {
        // 'comma-dangle': ['error', 'always-multiline'],
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-unused-vars': 'warn',
        'vue/multi-word-component-names': 'off',
        'vue/require-default-prop': 'off',
    },
    ignorePatterns: ['node_modules'],
};

5. babel配置

module.exports = {
    presets: ['@vue/babel-preset-app'],
};

6. Prettier配置

{
    "tabWidth": 4,
    "singleQuote": true,
    "printWidth": 140,
    "endOfLine": "crlf",
    // "useTabs": true,
    "semi": true,
    "trailingComma": "es5",
    "bracketSpacing": true
}