vite2转vue2

基于webpack 的项目，由于项目迭代太多，项目体积逐渐变大，每次开发运行速度极慢，想着vite已经逐渐成熟，试着把开发环境使用vite,打包依旧使用webpack。

安装插件

npm i vite-plugin-vue2 @originjs/vite-plugin-commonjs -D

vite-plugin-vue2是适配vue2.x的 @originjs/vite-plugin-commonjs 插件是转commonjs的

新建vite.config.js文件

import {
  defineConfig
} from 'vite'
import {
  createVuePlugin
} from 'vite-plugin-vue2'
import {
  resolve
} from 'path'
import {
  viteCommonjs
} from "@originjs/vite-plugin-commonjs"




export default defineConfig({
  build: {
    sourcemap: false
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/common.scss";`
      }
    }
  },
  plugins: [
    createVuePlugin({
      vueTemplateOptions: {}
    }),
    viteCommonjs({
      //   exclude: ["lodash"], //lodash不需要进行转换
    }),
  ],
  resolve: {
    extensions: ['.vue', '.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
    alias: {
      '@': resolve('src'),
      '~@': resolve('src'),
    }
  },
  server: {
    host: '0.0.0.0',
    port: 3001,
    // open: '/', //自动在浏览器中打开项目 
    proxy: {
      '/api': {
        target: 'http://192.168.1.107:50201', //接口地址
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': '/api'
        // }
      },
    }
  },
})

根目录新建index.html文件

添加

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

然后添加vite命令

在package.json的scripts添加

"scripts": {
 "vite": "vite"
},

启动后发现登录页正常，登录进入后报错

qrcodejs2插件使用@ark-libs/qrcodejs2 替换解决
sass 报错，深度选择器/deep/ 全部替换成::v-deep{}解决
sass 报错函数语法报错，#{}计算使用calc()包裹解决

静态文件动态引入报错

在webpack里动态引入文件使用require()语法，require是webpack特有的vite不支持，因为我在src下只有一个assets静态文件夹，遂在main.js里给window挂载一个require方法解决，main.js和assets目录在同一层级

window.require = (path) => {

let url = "";
try {
 if (path && path.includes("/")) {
   const KEY = path.replace(/@/, ".");
   url =
     import.meta.globEager("./assets/**/*")[KEY].default

 }
} catch (error) {

}
return url
}

区分环境

因为开发环境使用vite,打包使用webpack，所以上面的window.require方法里面的import语法在webpack环境中就没必要了，找了好久不知道怎么区分环境，使用了一个笨方法

let env = "";
try {
 if (process.env.NODE_ENV) {
   env = "webpack";
 }
} catch (error) {
 // console.log(error)
}

try {
 if (import.meta.env) {
   env = "vite";
 }
} catch (error) {
 // console.log(error)
}
console.log(env)

在main.js顶端引用一下就可以区分环境了

至此终于解决了所有问题，开发环境vite和显示环境webpack的差异也尽量抹平，使用开发体验还是挺爽的这是我的解决方法，有更好的方法欢迎留言探讨！！！

vue2 webpack5转vite爬坑