如何为老vue项目添加vite支持详解

 更新时间:2021年09月15日 14:55:58   作者:Jason_Guo  
Vite是一个开发环境工具,旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下

1、前言

接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了。

vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点:

快速的冷启动

即时的模块热更新

真正的按需编译

2、开始升级

注:只是升级了开发环境,打包依旧是webpack(也试过打包也用vite,但是打包后发现iview的字体图标出现问题了,初步验证是静态资源的问题,vite打包后的静态资源默认放到assets下,如果有解决的同学麻烦告知下解决方案)

2.1 安装vuecli插件vite

vue add vit # 添加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、升级完成

至此整个升级过程就结束了,总的来说还是比较顺利的没有太多坑,都是一些比较好解决的问题。

到此这篇关于如何为老vue项目添加vite支持的文章就介绍到这了,更多相关老vue项目添加vite内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    vue v-for循环重复数据无法添加问题解决方法【加track-by=''索引''】

    这篇文章主要介绍了vue v-for循环重复数据无法添加问题解决方法,结合实例形式分析了vue.js通过在v-for循环中添加track-by='索引'解决重复数据无法添加问题相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • Vue自定义树形控件使用详解

    Vue自定义树形控件使用详解

    这篇文章主要为大家详细介绍了Vue自定义树形控件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue 挂载路由到头部导航的方法

    vue 挂载路由到头部导航的方法

    本篇文章主要介绍了vue 挂载路由到头部导航的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 如何使用vue过滤器filter

    如何使用vue过滤器filter

    这篇文章主要介绍了如何使用vue过滤器filter,对vue感兴趣的同学,可以参考下
    2021-05-05
  • vue中v-for通过动态绑定class实现触发效果

    vue中v-for通过动态绑定class实现触发效果

    这篇文章主要介绍了vue中v-for通过动态绑定class实现触发效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • vue删除html内容的标签样式实例

    vue删除html内容的标签样式实例

    今天小编就为大家分享一篇vue删除html内容的标签样式实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 从0到1构建vueSSR项目之路由的构建

    从0到1构建vueSSR项目之路由的构建

    这篇文章主要介绍了从0到1构建vueSSR项目之路由的构建,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue 的点击事件获取当前点击的元素方法

    vue 的点击事件获取当前点击的元素方法

    今天小编就为大家分享一篇vue 的点击事件获取当前点击的元素方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈webpack编译vue项目生成的代码探索

    浅谈webpack编译vue项目生成的代码探索

    本篇文章主要介绍了浅谈webpack编译vue项目生成的代码探索,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue CLI2升级至Vue CLI3的方法步骤

    Vue CLI2升级至Vue CLI3的方法步骤

    这篇文章主要介绍了Vue CLI2升级至Vue CLI3的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论