vite配置几个报错问题解决

用npm init vite-app [name] 创建的项目

import { defineConfig } from 'vite';
export default defineConfig({
});

vite.defineConfig is not defined
原因是vite版本太低，没能从vite中解构出来，升级版本即可。

升级后启动项目报错Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

安装 yarn add -D @vitejs/plugin-vue

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
export default defineConfig({
    plugins: [vue()]
})

引入组件时使用了.jsx文件，报错index.jsx:38 Uncaught ReferenceError: React is not defined

需要配置jsx语法

安装 cnpm install -D @vitejs/plugin-vue-jsx

import { defineConfig } from 'vite'
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
    plugins: [
        vue(),
        vueJsx()
    ]
})

配置scss全局变量时，报错expected ";".

解决

设置预处理css的时候路径最后要加上 ;
即：
 preprocessorOptions: {
            scss: {
                additionalData: '@import "./src/styles/var.scss";'//这里的'；'分号不能漏且位置正确
            }
        }

配置svg时可能报错Cannot find module 'fast-glob'

cnpm install fast-glob -D

按照官网配置vant报错，改成下面这样

######   1.4.1版本vite-plugin-style-import  &&   vant  3.5.0
styleImport({
            resolves: [VantResolve()],
            libs: [
                {
                    libraryName: "vant",
                    esModule: true,
                    resolveStyle: (name) => {
                        return `../es/${name}/style/index`;
                    },
                },
            ]
        }),