当前版本vite@2.3.71.哪些项目适合使用vue2迁移系统内部系统——不需要大流量场景：因为vite变化快，系统需要定期更改基础功能，导致不稳定非SSR系统-SSR仍然存在很多问题。目前，在社区丰富和定期维护的情况下，系统存在开发痛点，需要改进：比如打包慢、冷启动慢、HMR更新慢等。...vite生产环境使用rollup，但改造成本高，效率不高，风险大，暂时不推荐。【愚见，大哥轻喷】2.迁移步骤会以内部系统为案例进行改造，开发使用vite，生产保留webpack。简单了解vite特性。如有问题，请先查看vite官网，看是否有更新或解决方案！！npmivite@2.3.7vite-plugin-vue2@1.6.2vite-plugin-html@2.0.7-Dpackage.json添加脚本--"vite":"NODE_ENV=developmentvite"关键是配置vite.config.js[默认名称是这个文件名，你可以配置成其他的。.】import{defineConfig}from'vite';importpathfrom'path';importfsfrom'fs';import{createVuePlugin}from'vite-plugin-vue2';import{injectHtml,minifyHtml}from'vite-plugin-html';import{cjs2esmVitePlugin}from'cjs2esmodule'importdotenvfrom'dotenv'constconfig=require('./config')try{//根据环境变量constfile=dotenv.parse(fs.readFileSync(`./config/.env.${process.env.NODE_ENV}`),{debug:true})console.log(file)//根据获取的key给对应的环境变量赋值for(constkeyinfile){process.env[key]=file[key]}}catch(e){console.error(e)}constAPI_LOCATION=process.env.API_LOCATION||'/api'functionresolve(dir){returnpath.join(__dirname,'./',dir)}exportdefaultdefineConfig({root:'./',//项目根目录（index.html文件所在位置）可以是绝对路径，也可以是相对于配置文件本身的相对路径。publicDir:'public',//作为静态资源的文件夹。值可以是文件系统的绝对路径，也可以是相对于项目根目录的相对路径。base:'./',//公共基路径。取值可以是绝对路径，也可以是空字符串vue/dist/vue.esm.js',//如果是模板解析——使用这个vue:内部是正则表达式末尾的'vendor'vue:resolve('src/vendor'),'@':resolve('src'),'~@':resolve('src'),'~component':resolve('src/components'),'~config':resolve('config'),}},plugins:[cjs2esmVitePlugin(),//commonjs转esmodule:有错误createVuePlugin({jsx:true,jsxOptions:{injectH:false,},}),minifyHtml(),//压缩HTMLinjectHtml({//注入模板入口文件index.htmlintoinjectData:{//template注入数据htmlWebpackPlugin:{options:{isVite:true,shotcut:'/static/img/favicon.png',}},title:'HMO操作背景',},}),],define:{'process.env':process.env},server:{host:'liang.myweb.com',open:true,//是否自动开启浏览器port:process.env.PORT||config.dev。port,proxy:{[API_LOCATION]:{target:'http://127.0.0.1:8001',rewrite:(path)=>path.replace(API_LOCATION,'')}}},});三、常用问题【踩坑日记#128516;】1、Vite目前要求入口文件必须是根目录下的index.html。如果之前的webpack入口文件重名，则需要更改。解决方法：vite.config.js:import{injectHtml}from'vite-plugin-html';exportdefaultdefineConfig({plugins:[injectHtml({//入口文件index.html的模板注入injectData:{//注入的数据thetemplatehtmlWebpackPlugin:{//取与webpack插件同名的objectkey，然后options:{isVite:true,shotcut:'/static/img/favicon.png',}},title:'HMO运行后台'},})]})webpack.xxx.jsnewHtmlWebpackPlugin({template:'index.html',inject:true,isVite:false//加标志})根目录入口文件index.html-ejs模板<%if(htmlWebpackPlugin.options.isVite){%><%}%>2.新版本报xx错误：可以切换到旧版本，如vite@2.2.33。没有出口命名？UncaughtSyntaxError:Therequestedmodule'/config/index.js'doesnotprovideanexportnamed'default'UncaughtSyntaxError:Therequestedmodule'/config/index.js'doesnotprovideanexportnamed'default'错误原因：浏览器只支持esm，不支持cjsvite.config。jsimport{cjs2esmVitePlugin}from'cjs2esmodule'exportdefaultdefineConfig({plugins:[cjs2esmVitePlugin(),//convertcommonjstoesmodule]})如果有需求。onstsubjectList=r=>require.ensure([],()=>r(require('@/pages/xxx/subject/list.vue')),'subject');//改为：Vue动态组件component:()=>import()constsubjectList=()=>import(/*webpackChunkName:"subject"*/'@/pages/xxx/subject/list.vue')constarr=[{path:'/subject/list',name:'subject/list',component:subjectListmeta:{...}}];exportdefaultarr;4.proxy使用http-proxy请参阅此处了解完整选项。示例：proxy:{'/rest':{target:'http://my.web.com/',changeOrigin:true,bypass:(req,res,proxyOption)=>{console.log(`当前请求代理:${req.url}->${proxyOption.target}`);},},}5.ts文件错误？验证vite的ts处理"compilerOptions":{"types":["vite/client"]}6.全局环境变量错误？//constisProd=ENV==='production';//webpack-dev环境变量//constisProd=import.meta.env.PROD;//vite-dev环境变量//可以避免上面的👆🏻,使用NODE_ENV区分：constisProd=process.env.NODE_ENV==='production';然后当我们启动时："dev":"NODE_ENV=developmentvite"或者你可以在社区中探索babel插件：babel-preset-vite[包含以下两个功能]babel-plugin-transform-vite-meta-envbabel-plugin-transform-vite-meta-glob7。请参阅一些打印的日志和错误等？cli--debug，或者vite.config.js配置打印相关参数8.导入文件时，比如.vue，扩展名不能省略吗？是的！！！No,theyWon'tDoititbecausetheydon'twanttodo😭,就是这么设计的，详情请点这里，游先生推特解释然后添加resolve.extensions:['.vue']并直接在控制台报错：所以没用。..错误：Noloader被配置为“.vue”危害！老老实实加分机吧！[在线🐶]方便的全局扩展方法如下：链接9.找不到less文件？[vite]Internalservererror:'~@/styles/var.less'未找到。(1)确保支持less:npminstall-Dless(2)resolve.alias不要忘记加一个:'~@':resolve('src')10.如何支持jsx?vite.config.jsimport{createVuePlugin}from'vite-plugin-vue2';createVuePlugin({jsx:true,//配置jsxjsxOptions:{injectH:false,},})Vue.component('my-component',{render(){return(
