为老的vueCli项目添加vite支持

简介: 为老的vueCli项目添加vite支持

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 希望你能有所收获 😁


相关文章
|
7月前
|
存储 JavaScript 前端开发
VueCLI 脚手架II
VueCLI 脚手架II
|
7月前
|
JavaScript 搜索推荐
VueCLI 脚手架I
VueCLI 脚手架I
|
JavaScript 应用服务中间件 nginx
Vue打包并发布项目
Vue打包并发布项目
|
2月前
|
资源调度 JavaScript 前端开发
如何实现一个类似 vite 的脚手架并发布 npm
本文介绍了如何实现一个类似 Vite 的脚手架工具。通过详细解析和实践,文章分享了从零开始构建脚手架的过程,包括技术选型、开发步骤及发布 NPM 包的完整流程。最终目标是让用户能够通过 `yarn create electron-prokit myapp` 快速搭建 Electron 项目。项目源码可在 GitHub 上获取。
28 5
|
2月前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
103 0
|
4月前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
4月前
|
JavaScript 前端开发
什么是前端构建工具?vite和vite脚手架的关系!
【8月更文挑战第1天】前端构建工具简析
88 4
|
5月前
|
JavaScript
Vite 项目中如何去集成 Sass
Vite 项目中如何去集成 Sass
66 0
|
7月前
|
资源调度 JavaScript Linux
VueCLI:Vue项目脚手架与构建工具技术详解
【4月更文挑战第24天】VueCLI是Vue.js官方的项目脚手架,简化创建与配置,提供丰富的插件系统,支持全生命周期功能,如代码编译、打包部署。它具有易于配置、跨平台支持等优势。通过安装、创建项目、运行及构建命令,开发者能快速搭建Vue应用。VueCLI允许自定义配置(vue.config.js)和安装各类插件,如vue-router、vuex,以适应不同项目需求,提高开发效率。
|
域名解析 开发框架 JavaScript
vue2.0项目从零开发到打包部署
vue2.0项目从零开发到打包部署
151 0