将vue2+webpack 开发环境转为vite

webpack打包项目过大，慢且容易内存溢出。哭唧唧

步骤

当前只是vite的开发环境踩坑，项目目前依旧保持webpack打包
vite需要node版本为12及以上，当前 v12.12.0

1、安装vite相关的包

npm install vite -D
npm install @vue/compiler-sfc -D
npm install vite-plugin-vue2 -D

2、新建vite.config.js

proxy 代理 rewrite而非pathWrite；cjs2esmVitePlugin 包将 commonjs 转化为 es module；resolve.extensions中添加对应后缀

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import {resolve} from 'path'
import { cjs2esmVitePlugin } from 'cjs2esmodule'

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

export default defineConfig({
  server: {
    port: '7010',
    proxy: {
      '/user': { 
        target: 'http://localhost:8051/',
        secure: true,
        changeOrigin: true,
        rewrite: path => path.replace(/^\/user/, 'user') // 路由这里vite用的是rewrite而非pathWrite，需注意调整
      },
    }
  },
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {}
    }),
    cjs2esmVitePlugin(), // 将 commonjs 转化为 es module
  ],
  resolve: {
  // 文件后缀省略导致页面报错404(例：vue文件引入时，webpack只需要文件名)，在vite.config.js配置resolve.extensions中添加对应后缀，vite默认有['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']。
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      // vue2项目别名一般都是@，vue3中一般使用/@/, 为方便使用
      '@': resolve('src')
    }
  }
})

3、index.html引入main.js

<script type="module" src="/src/main.js"></script>

4、main.js引入App.vue方式调整

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
  // template: '<App/>',
  // components: {
  //   App
  // }
});

5、调整自定义模块、路由引入方式：require -> import、export default

路由有三种动态引入方式，采用import方式

// component: resolve => require(['@/mods/voucher/container_community.vue'], resolve), // 导航
  component: () => import(/* webpackChunkName: "container_community" */ '@/mods/voucher/container_community.vue'),

开发时，有一些组件引入公共文件require方式，调整为import引入

6、script添加命令

"vite": "vite",
"debug": "vite --debug", // 刚开始切换的时候还是很需要debug的

参考资料

Vue2老项目使用vite2升级
动态路由多种方式