vue cli2 升级vue cli3 采坑记录

项目背景

是一个三年前基于 element-admin 搞出来的项目，一开始都还挺好的，虽然启动项目慢了点，但是编译速度不慢，后来经过某一次需求之后，就开始编译速度很慢了，😣😣

项目存在的问题

• 启动速度慢
  

• 编译速度慢
  

  原项目依赖和文件目录

  文件目录

  

  package.json

  dependencies

  

  devDependencies

  

迁移到cli3 之后，感觉还是不错的😄😄😄

• 启动项目
  
• 编译速度
  

开始迁移

• 思路1： 构建一个vue cli新的项目，然后把依赖拷贝过去（结果做到一半搞不下去了，坑太多了，哈哈）

• 思路2

  1. 因为当初这个项目是三年前我基于vue-admin-template这个项目来做的，
  2. 我去官网看了下， 他现在升级到了vue cli3 的版本，我把他拷贝下来，然后做一下替换，应该比我的思路1，踩的坑少一点，
  3. 感觉思路1也是可以做的，奈何懒得折腾，就走了捷径把

  迁移步骤

  1. static 目录和index.html文件要拷贝到public文件夹下，static静态文件路径更改

  
  

  2. 修改package.json依赖

  dependencies依赖对比

  

  devDependencies依赖对比

  vue-template-compiler 要和vue 的版本一样，以免出现什么诡异的问题，

  

  babel-eslint 要进行降级处理，不然会报错： TypeError: Cannot read property 'range' of null

  问题原因：https://segmentfault.com/a/1190000022127732

  

  3. 替换eslint成原来项目的（如果原来项目没有eslint的，建议去网站找一个自己喜欢的eslint 丢进来）

  

  4. 修改上下文和代理文件，启动项目

  有一个警告，项目没有报错，开心😄😄😄

  

  报错critical deependency: the request of a dependency is an expression

  
  问题原因：webpack import 动态加载组件的坑
  解决方案

• 改成require 的方式就好了
  

• 改成require 的方式就好了（不建议使用rquire的方式，具体看下文）
  

  const   load = view => () => import(@/views/callManage/${view}) 
   变成 
  const   load = (view) => (resolve) => require([@/views/callManage${view}], resolve)

  2023-06-20 补充，上面的require方式不会分包！！！，请使用下面这种方式

  {
    path: 'saas',
    name: 'settleDataSaas',
    component: () =>
      import(
        /* webpackChunkName: "settleDataSaas" */ '@/views/settleData/saas'
      ),
    meta: { title: 'SAAS业务结算数据', icon: 'accountingAdmin' }
  },

  修改publicPath，如果部署的环境是多项目的话，就需要

  

因为现在的架构是把node-saas 迁移成dart-saas,所以要处理一些语法不兼容的问题，其实就是一个语法不兼容，还是很容易解决的，全局替换一下咯

官网说明

Module parse failed: Unexpected token

问题描述，报错，说element ui 的包有问题，一脸懵逼，github走一波

报错信息

• 报错原因：我们使用饿了么内置的工具类！！！！，因为之前某个产品一直强制要求做一个很恶心的功能，所以有个同事就基于饿了么的日期再用他的工具类再封装了一个组件！！！！
  
  

  解决办法

• 饿了么官网issue1
  
• 饿了么官网issue2
  

引申问题

• 为啥经过某一次需求就回这么慢，那一次需求添加的文件也不多哈？
• 还是webpack不熟，哈哈

结束语

• 本文如有错误，欢迎指正，非常感谢
• 觉得有用的老铁，点个双击，小红心走一波
• 欢迎灌水，来呀，互相伤害哈 o(∩_∩)o 哈哈

参考资料

• 【vue-cli3升级】老项目提速50%（一）
• TypeError: Cannot read property 'range' of null