关于vue.js: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/11…

  3. 替换 eslint 成原来我的项目的

  4. 批改上下文和代理文件，启动我的项目

  有一个正告，我的项目没有报错，开心😄😄😄

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

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

• 改成 require 的形式就好了
  

• 改成 require 的形式就好了
  

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

  批改 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