vue cli 3.x 升级vue 5.x

温馨提示：推荐自动化升级（非常重要），非必要不要手动改package.json,会减少很多报错,不然会陷入报错陷阱，源源不断的问题，这时就要考虑推翻重来了

1.升级cli版本

yarn global add @vue/cli

2.升级相关的依赖

vue upgrade

3.

根据运行中的错误不断的优化修改vue.config.js

4.本次遇到的问题集（开发坏境正常，生产坏境异常）

4.1

Uncaught TypeError: "constructor" is read-only

解决办法：

在控制台找到相关的js文件，并分析是什么依赖，将该文件通过cdn或者下载下来本地引用的方式来绕过编译校验

此处具体介绍下本地方式引用

一.将报错的js文件下载到本地，放在public文件夹下

二.在index.html中通过src方式引用，问题解决

补充：需要在vue.config.js文件中声明viser-vue的引用方式

configureWebpack: config => {

config.externals = {

'viser-vue': 'ViserVue'

}

使用方式不变

import Viser from 'viser-vue'

Vue.use(Viser)

4.2 

Uncaught ReferenceError: can't access lexical declaration 'n' before initialization

解决办法：

在控制台找到相关的js文件，并分析是什么地方的问题，然后将const改为var

注意：这里的'n'是编译后的变量，不太好定位，但是将js文件解密后仔细找前后文里的关键变量，再去项目里搜索就能找到了

4.3 <style lang="less" scoped>

@import "Icon";

以这种方式导入的样式可能会使scoped标记失效，从而影响全局

解决办法：

将Icon.less里面的样式直接写在vue页面里（暂时没有找到更优雅的办法）