• Vite3 + Vue2.7 环境搭建(TS)

    前言

    根据vite官网的描述：

    > Vite 不再支持 Node 12 / 13 / 15，因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。

    因此需要注意前端线上构建的服务器环境的nodejs版本。

    基础环境搭建 

    1. 执行npm init vite@latest
    2. 选择vanilla 创建一个空项目。因为选择vue 会创建vue3的项目。
    3. 然后手动调整项目中的目录接口，把原来的无用的代码该删除的删除，最终达到如下效果。

      红框中的文件是新建的

    4. 想使vite支持vue2.7 需要安装插件 npm i @vitejs/plugin-vue2 -D
      vite.config.js

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

    5. 文件
      1. App.vue 中的文件随意写
      2. index.html 文件中的 script 标签中引入的 main.js 路径要改变

      3. main.js

        import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

    准备完成后运行npm run dev 即可正常运行开发环境。

    css 支持（默认支持）

    less支持

    npm i less -D 即可支持

    浏览器兼容(@vitejs/plugin-legacy)

    vite/packages/plugin-legacy at main · vitejs/vite · GitHub

    TypeScript支持

    npm init vite@latest 的时候选择TypeScript创建即可。

    vue 文件中