vue2 老项目改用 vite 全方位指南

删除 node_modules、package.json 中的开发依赖 devDependencies、基于 webpack 的配置（e.g. babel、eslint、jsconfig）
安装 vite 和@vitejs/plugin-vue2(只支持 vue 2.7 以上)
编写 vite 配置，注意继承原 webpack 配置(process.env=>import.meta)
把 public 的 index.html 移动到根目录并修改模版变量（使用 vite-plugin-html 插件）

vite.config.js

javascript

   import vue2 from "@vitejs/plugin-vue2"
   import { createHtmlPlugin } from "vite-plugin-html" // 用于index.html模版变量
   import commonjs from "vite-plugin-commonjs" // 用于支持 commonjs 模块
   import { fileURLToPath, URL } from "node:url"
   export default defineConfig({
    css:{
      perprocessorOptions:{
        scss:{
          additionalData:"@import '@/variable.scss';"
        }
      }
    }
    plugins:[
       vue2(),
       commonjs(),
       createHtmlPlugin({
         inject:{
           data:{
             title:"标题",
             BASE_URL:"/public"
           }
         }
       })
     ],
     resolve:{
       alias:{
         "@":fileURLToPath(new URL('./src',import.meta.url)),
       },
       extensions:[".vue",".js",".css"] // 支持后缀文件
     }
   })

index.html

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>/favicon.ico" />
    <title><%= title %></title>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

package.json

json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

开发模式命令改成 vite
解决 sass 模块引入问题

variable.scss 文件改成 variable.modules.scss
降 sass 版本为 sass@1.5

vue2 老项目改用 vite 全方位指南 ​

vue2 老项目改用 vite 全方位指南