如何为老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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue3.0 + TypeScript + Vite初体验

    详解Vue3.0 + TypeScript + Vite初体验

    项目创建 npm: $ npm init vite-app <project-name> $ cd <project-name> $ npm install $ npm run dev or yarn: $ yarn create vite-app <project-name> $ cd <project-name> $ yarn $ yarn dev 项目结构 main.js 在个人想法上,我觉得createApp()是vue应用的实例,createApp

  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    vite 尤大在 Vue 3.0 beta 直播中推荐了 vite 的工具,强调:针对Vue单页面组件的无打包开发服务器,可以直接在浏览器运行请求的 vue 文件 很新颖,这篇博客用它来搭建一个 vue3 的项目试试 Vite 是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的 Web 开发构建工具.在生产环境下基于 Rollup 打包 快速冷启动服务器 即时热模块更换(HMR) 真正的按需编译 node >= 10.16.0 搭建 使用 vite 搭建项目 npm init

  • 用vite搭建vue3应用的实现方法

    一,安装 提示: VUE3.0目前还没有官方的翻译文档.但是已经有人翻译了.得到了尤雨溪大佬的点赞,这里附上网址https://v3.cn.vuejs.org/ 1.安装 cli 因为要使用 vue3 必须要求 cli 的版本比较高,必须要高于 4.5.X 所以没有安装的 cli 的就直接安装最新版就行了,已有的可以升级或者卸载后重新安装 最好是全局安装 //全局安装 npm install -g @vue/cli # OR yarn global add @vue/cli //全局卸载 npm

  • vite2.0+vue3移动端项目实战详解

    一.涉及技术点 vite版本 vue3 ts 集成路由 集成vuex 集成axios 配置Vant3 移动端适配 请求代理 二.步骤 vite+ts+vue3只需要一行命令 npm init @vitejs/app my-vue-app --template vue-ts 配置路由 npm install vue-router@4 --save 在src下新建router目录,新建index.ts文件 import { createRouter, createWebHashHistory, Ro

  • Vite和Vue CLI的优劣

    Vue 生态系统中有一个名为 Vite 的新构建工具,它的开发服务器比 Vue CLI 快 10-100 倍. 这是否意味着 Vue CLI 已经过时了?在本文中,我将比较这两种构建工具,并说明它们的优缺点,以便你可以决定哪一种适合你的下一个项目. Vue CLI 概述 大多数 Vue 开发人员都知道,Vue CLI 是使用标准构建工具和最佳实践配置快速建立基于 Vue 的项目的不可或缺的工具. 其主要功能包括: 工程脚手架 带热模块重载的开发服务器 插件系统 用户界面 在本讨论中需要注意的是,

  • vue3.0+vite2实现动态异步组件懒加载

    vue3.0+vite2实现动态异步组件懒加载

    创建一个vite项目 性能决定成败;vite确实快: cmd 命令行(默认你已经安装了node & npm),执行npm init @vitejs/app vue-study – --template vue: cd至vue-study,npm install(安装依赖); npm run dev(启动项目): 创建组件 新建一个目录为pages,pages下面再新建一个目录contents,contens下面可以新建具体的组件目录页面,此时目录结构为 App.vue <template&g

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

    1.前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了. vite -- 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点: 快速的冷启动 即时的模块热更新 真正的按需编译 2.开始升级 注:只是升级了开发环境,打包依旧是webpack(也试过打包也用vite,但是打包后发现iview的字体图标出现问题了,初步验证是静态资源的问题,v

  • 如何为asp.net core添加protobuf支持详解

    前言 在一些性能要求很高的应用中,使用protocol buffer序列化,优于Json.而且protocol buffer向后兼容的能力比较好. 由于Asp.net core 采用了全新的MiddleWare方式,因此使用protobuf序列化,只需要使用Protobuf-net修饰需要序列化的对象,并在MVC初始化的时候增加相应的Formatter就可以了. 没时间解释了,快上车. 通过NuGet获取Zaabee.AspNetCoreProtobuf Install-Package Zaab

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • Visual Studio 2019配置vue项目的图文教程详解

    一,环境安装 1:Vue项目一切基于Node.js,必须先安装NodeJS, 下载地址:https://nodejs.org/zh-cn/ 安装nodejs,一路next就行了 Additonal工具可以不用安装. win+r 输入cmd 输入 node -v 和 npm -v 得到版本信息证明装好了. 2:确认Visual Studio 2019环境:看扩展工具里有没有勾选NodeJs 二,使用VS2019 创建Vue项目 后期会新增多个vue的项目,所以建议加一个vue名称 方案管理文件 你

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • vue项目中axios使用详解

    vue项目中axios使用详解

    axios在项目中(vue)的使用 没有vue项目的使用vue-cli脚手架生成一个webpack模板的项目即可愉快的看下去了~ 如果开发遇到跨域问题可以参考:http://www.jb51.net/article/134571.htm 安装axios到项目中 npm install axios --save 配置wepack别名,不同环境访问不同的配置接口 配置: 使用:import config from 'config' 封装一个axios实例 新建fetch.js,在此创建axios实例

  • vue项目支付功能代码详解

    vue项目支付功能代码详解

    1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构), 提交form就可以调用支付宝支付 代码: // alipayWap: 后台接口返回的form 片段 <div v-html="alipayWap" ref="alipayWap"></div> methods: { toAlipay () { this.$axios.get('xxx').then (res = >

  • Vue项目添加动态浏览器头部title的方法

    0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue cli实现项目登陆页面流程详解

    vue cli实现项目登陆页面流程详解

    目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.4 在Login组件中将提交按键调整为100%宽度 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2.1 安装axios 3.2.2 发送get请求 3.2.3 发送post请求 3.2.4 简化axios使

随机推荐