1、前言
接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了。
2、开始升级
注:只是升级了开发环境,打包依旧是webpack(也试过打包也用vite,但是打包后发现iview的字体图标出现问题了,初步验证是静态资源的问题,vite打包后的静态资源默认放到assets下,如果有解决的同学麻烦告知下解决方案)
2.1 安装vuecli插件vite
vue add vite # 添加vite插件
插件安装完成后会在package.json中的script添加:
{ "script": { "vite": "node ./bin/vite" } }
使用
pnpm
的同学,如果项目根目录下没有.npmrc
文件请自行添加并在文件内加上shamefully-hoist=true
;否则安装vite插件可能会失败。
2.2、运行项目并排查错误
2.2.1、TypeError: Cannot read property 'alias' of undefined
这个错误是因为在vue.config.js
中的configureWebpack
只能使用对象的配置方法(vue cli支持对象和函数两种方式)
2.2.2 Unrestricted file system access to "/src/components/editPwd
出现这个问题的原因是:vite默认配置中的extensions
不包含.vue
;解决方法:
- 1、在vue.config中加上extensions
// vue.config.js module.exports = { configureWebpack:{ resolve:{ extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] } } }
- 2、所有vue组件在导入时加上
.vue
的后缀名。
2.2.3、启动端口不是8080
vite默认的启动端口是
3000
,所以需要在vue.config.js
中的devServer
中加上port:8080
// vue.config.js module.exports = { devServer:{ port: 8080 } }
2.2.4、开发时的代理失效
代理失效的原因:在vuecli
中的重写配置是pathRewrite
,而在vite
中是rewrite
.
解决方法:
module.exports = { devServer: { port: 8080, proxy: { "/api/cost/": { target: "http://localhost:9331", changeOrigin: true, pathRewrite: { "^/api/cost/": "/", }, rewrite: path => path.replace(/^\/api\/cost\//, "/"), // 适配vite }, "/api/import/": { target: "http://localhost:9332", changeOrigin: true, pathRewrite: { "^/api/import/": "/", }, rewrite: path => path.replace(/^\/api\/import\//, "/"), // 适配vite }, "/api/": { target: "http://localhost:9333", ws: true, changeOrigin: true, pathRewrite: { "^/api/": "/", }, rewrite: path => path.replace(/^\/api\//, "/"), // 适配vite }, }, }, }
3、升级完成
至此整个升级过程就结束了,总的来说还是比较顺利的没有太多坑,都是一些比较好解决的问题。最后感谢各位观众老爷的能看到最后 O(∩_∩)O 希望你能有所收获 😁