前言
都已经2202年了,vite
已经可以算是遍地开花了,这两年的关注度也比较高究其原因,还是因为苦webpack
久矣;
随着项目功能越来越多,代码越来越复杂,随之而来的就是项目的各种慢(ps:跑个项目的时间都能去茶水间打杯水回来喝一会儿了???)
至于原因,简短来说,就是webpack
需要去索引整个项目的文件,编译成一个或多个单独的js文件;而vite
则是在浏览器请求对应URL的时候,再提供对应的文件,更详细的还是去瞅瞅vite的自荐吧
开搞
开始进入正题
1.修改项目配置
终端输入npmi-Dvite
安装vite
修改pageage.json
中的相关命令
"dev":"vite","build":"vitebuild","serve":"vitepreview","lint":"eslint--ext.js,.vue--ignore-path.gitignore--fixsrc"
2.在根目录创建vite.config.js
文件
import{defineConfig}from'vite'import{createVuePlugin}from'vite-plugin-vue2'importpathfrom'path'exportdefaultdefineConfig({base:'./',plugins:[createVuePlugin()],server:{open:true//启动完成之后自动打开浏览器},resolve:{alias:[{find:'@',replacement:path.resolve(__dirname,'src')}//使用这种方式可以引入.vue文件,但是图片会404{find:'/@',replacement:'src'},//解决图片使用别名404,@符号前面需要加'/',也没有用绝对路径]}})
3.修改环境变量
在vite中已经不支持原来的process.env
来访问环境变量了
需要改为import.meta.env
来访问,在.env文件中的变量也需要把前缀改为VITE_
(ps:也可以通过在vite.config
中设置envPrefix
来自定义前缀)
如以下代码:
VITE_APP_API_URL=/apiVITE_TITLE=title
4.配置全局的css变量
在vue-cli
中是借助了style-resources-loader
来实现的全局变量,在vite
中直接通过css.preprocessorOptions
就可以进行配置
css:{preprocessorOptions:{less:{additionalData:`@import'./src/assets/style/variables.less';`}}}
5.修改index.html文件
首先将public
文件夹下的index.html
移动到根目录
在index.html
中引入src目录下的main.js
文件
<scripttype="module"src="/src/main.js"></script>
还有一个就是vite默认不支持ejs的语法(ps:其实有尝试用过vite-plugin-html
插件,但是会启动报错??),在当前项目中也没有实际性的意义,就不折腾啦,所以改为了原生写法
-<linkrel="icon"href="https://blog.csdn.net/qq_26314225/article/details/<%=BASE_URL%>favicon.ico">-<title><%=VUE_APP_NAME%></title>#改为了下面这样<linkrel="icon"href="https://blog.csdn.net/qq_26314225/article/details/favicon.ico"><title>Title</title>
做完上面几步,就可以输入npmrundev
来运行项目了
遇到的一些问题
1.不支持require
重写require
的方法来引入图片
//因为只有图片引入还在使用require,所以就只用于图片引入了window.require=url=>{if(typeofurl==='undefined')returnreturnnewURL(url,import.meta.url).href}
部分插件是用require来加载的,统一改为import来引入
//constCodeMirror=require('codemirror/lib/codemirror')//require('codemirror/addon/hint/show-hint')import*asCodeMirrorfrom'codemirror/lib/codemirror'import'codemirror/addon/hint/show-hint'
2.TypeError:Failedtofetchdynamicallyimportedmodule
原因的话是因为vite
不支持对.vue
后缀的识别,在引入组件的文件路径上补充.vue
后缀就好啦