The plug-in

  • vite-plugin-react-js-supportVite only recognizes TSX and JSX files with the JSX syntax, but there are many JS files in the project that are also JSX
  • @vitejs/plugin-react-refreshVite supports react hot update plugin code
  • @vitejs/plugin-legacy: Provides traditional browser compatibility support for packaged files
  • vite-plugin-style-import: This plug-in imports component library styles on demand

Open the alias

resolve: {
    alias: [
        // /@/xxxx => src/xxxx
        {
            find: / / / @ / / /,
            replacement: pathResolve('src') + '/'}, {find: / # \ \ / / /,
            replacement: pathResolve('types') + '/',}]},Copy the code

Open the service

server: {
    host: '0.0.0.0'.proxy: {},
    hmr: {
        host: 'localhost',},cors: true,}Copy the code

Specific configuration code

// Vite only accepts files with the TSX and JSX suffixes for JSX syntax.
import vitePluginReactJsSupport from 'vite-plugin-react-js-support';
// Vite supports react hot update plugin code
import reactRefresh from '@vitejs/plugin-react-refresh';
// Traditional browser compatibility support for packaged files
import legacyPlugin from '@vitejs/plugin-legacy';
// The plug-in can import component library styles on demand
import styleImport from 'vite-plugin-style-import';
import createSvgSpritePlugin from 'vite-plugin-svg-sprite';
import path from 'path';

function pathResolve(dir) {
    return path.resolve(process.cwd(), '. ', dir);
}

// https://cn.vitejs.dev/config/#config-intellisense
export default ({ command, mode }) => {
    let rollupOptions = {};
    if (command === 'serve') {
        rollupOptions.input = [];
    }
    return {
        // Common base path for development or production environment services
        base: 'h5-vite'.// Project root directory
        root: '/'./ / alias
        resolve: {
            alias: [
                // /@/xxxx => src/xxxx
                {
                    find: / / / @ / / /,
                    replacement: pathResolve('src') + '/'}, {find: / # \ \ / / /,
                    replacement: pathResolve('types') + '/',}]},// Development server
        server: {
            host: '0.0.0.0'.proxy: {},
            hmr: {
                host: 'localhost',},cors: true,},/ / build
        build: {
            target: 'es2015'.minify: 'terser'.mainfest: false.// Whether to produce maifest.json for packaging analysis
            sourcemap: false.// Whether to output sourcemap.json
            outDir: "build".// Output directory
            rollupOptions, // Customize the underlying Rollup package configuration. Merges with Vite's internal Rollup option.
        },
        esbuild: {},
        // Rely on optimization options
        optimizeDeps: {},
        css: {
            // Specifies the options passed to the CSS preprocessor
            preprocessorOptions: {
                less: {
                    // Support inline javascript
                    javascriptEnabled: true,}}},plugins: [
            styleImport({
                libs: [{libraryName: 'antd'.esModule: true.resolveStyle: (name) = > {
                            return `antd/es/${name}/style/index`; }, {},libraryName: 'vant'.esModule: true.resolveStyle: (name) = > {
                            return `vant/es/${name}/style`;
                        },
                    },
                ]
            }),
            createSvgSpritePlugin({
                symbolId: '[name]',}).Import React from 'React'
            vitePluginReactJsSupport([], { jsxInject: false }),
            reactRefresh(),
            legacyPlugin({
                targets: [
                    'Android > 39'.'Chrome >= 60'.'Safari > = 10.1'.'the IOS > = 10.3'.'Firefox >= 54'.'Edge >= 15',]}),]}}Copy the code