一、vue3迁移过程

vite官网：点击这里
兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。不然的话使用npm install安装依赖包的时候会出现各种问题。

1、创建vite项目

npm init @vitejs/app
根据提示把项目名、选择创建的项目类型(我们这里选vue)，语言(javascript)

2、把vue/cli创建的vue3项目中package.json依赖包搬到vite的package.json中

搬完了之后记得使用 npm install 安装依赖包。

3、把vue/cli项目中的src目录整个搬到vite项目中替换掉src目录

4、修改vite配置文件

如果之前项目中有引用别名或者是配置了代理之类的，就需要把vue.config.js文件相应代码按照vite中配置文件的要求在vite.config.js写好。
vite配置文件参考：这里

如果不配置的话，vite中运行时vue项目组件中有使用@的地方就会报错。

5、运行项目

npm run dev

如果期间有其他报错的话，可百度查看如何解决。

二、vue2迁移过程

vue2的迁移过程和上面说的vue3迁移过程差不多，但是在第4步那里有点特殊！！！

修改vite配置文件

1、安装vite支持vue2的插件：vite-plugin-vue2
npm install vite-plugin-vue2 -D
2、在配置文件vite.config.vue中引入并修改配置

三、vite配置的其他注意点

1、vite中对eslint的配置不做约束，直接按照正常eslint的配置方式进行即可

vite在开发中eslint不直接参与文件处理, 可以只使用编辑工具进行提示, 在生产环境发布时校验一次即可。

1）、安装了eslint和babel-eslint
npm install eslint babel-eslint -D

2）、创建配置文件.eslintrc.js
npx eslint --init

如果运行该命令报错如下：
则查看是不是node版本过高，换到版本为14.16.0时是正常的。

根据提示按照自己的需要选好配置项。

3）、修改.eslintrc.js配置
我们需要对.eslintrc.js进行配置，最终配置如下（供参考，rules配置项需要根据项目编码规范进行修改）：

module.exports = {
    env: {
        browser: true,
        es2021: true,
        commonjs: true,
        node: true,
        jest:true,
    },
    extends: [
        'plugin:vue/essential',
        'airbnb-base',
    ],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly',
    },
    parserOptions: {
        ecmaVersion: 12,
        sourceType: 'module',
    },
    plugins: [
        'vue',
    ],
    rules: {
        'no-unused-vars': ['warn', { args: 'none' }],
        'linebreak-style': ['off', 'windows'],
        'no-console': 'off',
        'import/no-unresolved': 'off',
        'import/no-extraneous-dependencies': 'off',
        'no-use-before-define': 'off',
        'no-param-reassign': 'off',
        'no-plusplus': 'off',
        'no-lonely-if': 'off',
        'consistent-return': 'off',
        'no-unused-expressions': ['error', { allowShortCircuit: true, allowTernary: true }],
        'global-require': 'off',
        'array-callback-return': 'off',
        'import/prefer-default-export': 'off',
        'prefer-promise-reject-errors': 'off',
        'no-continue': 'off',
        indent: ['error', 4, { SwitchCase: 1 }],
        'no-trailing-spaces': 'off',
        'import/no-dynamic-require': 'off',
        'no-shadow': 'off',
        'max-len': ['error', {
            ignoreComments: true,
            code: 100,
            ignoreTrailingComments: true,
            ignoreUrls: true,
            ignoreStrings: true,
            ignoreTemplateLiterals: true,
            ignoreRegExpLiterals: true,
        }],
        eqeqeq: ['warn', 'smart'],
        radix: ['error', 'as-needed'],
        'no-underscore-dangle': 'off',
        'vue/no-multiple-template-root': 'off',
    },
};

4）、在package.json中的scripts配置项中添加自动修复指令
"fix": "eslint --fix src"

5）、eslint校验生效，如有eslint报错进行修复即可。

2、vite在开发中修改了vite.config.js文件是直接能监听到的，如果页面还没效果那么直接刷新浏览器即可，无需重新启动服务。而vue/cli修改vue.config.js之后还要重新启动服务。

3、想查看vite中的环境变量可以打印import.meta.env查看。

console.log(import.meta.env)

在vue/cli项目中是 process.env。
console.log(process.env)

4、vite的其他配置

4.1 配置PostCSS
i：需要安装的插件：
cnpm install postcss autoprefixer -D

ii：在项目根目录中创建postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer'),
    ],
};

4.2 配置支持typescript语法
vite中使直接支持typescript语法的。
如果js文件想用ts语法，那么直接把.js改为.ts即可；如果是.vue等组件文件，那么在script 标签添加lang="ts"属性(<script lang="ts">)。

<template>
    <ul>
        <li 
            v-for="item in courses" 
            :key="item.id"
        >
            {{item.name}}
        </li>
    </ul>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

interface Course {
    id: number,
    name: string
}

export default defineComponent({
    setup() {
        const courses = ref<Course[]>([]);
        setTimeout(() => {
            courses.value.push({
                id: 1,
                name: 'winne'
            })
        }, 1000);

        return {
            courses,
        };
    }
});
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

4.3 配置代理

4.4 配置mockjs

比较简单的mockjs配置和使用方式可以参考这里。