vuecli2.x升级到vuecli4.x，vue项目搬迁

前言

项目之前是vue2.x+vuecli2.9版本的脚手架进行搭建的，因为项目越来越庞大，实现动态路由懒加载时打包会卡死，需打包将近半个小时，所以考虑升级vuecli，提高打包速度。

---

一、vuecli2升级到vuecli4

1.卸载旧版本安装新版本

打开终端输入命令行检查当前版本：vue -V（是大写V，不是小写）
卸载旧版本：npm uninstall -g vue-cli 或cnpm uninstall -g vue-cli
安装新版本：npm install -g @vue/cli 或cnpm install -g @vue/cli
检查新版本：vue -V
如下显示 @vue/cli 4.5.13 说明安装成功。

2.用新的cli创建项目

vue create rhtlxjr-new-vue


两个选择，通过上下键操作：我这里有vue3所以会出现vue2和3，选择Default vue2回车。
如果选择自己手动配置会出现一些步骤选项需自己选，可以参考这个链接文章：http://www.zyiz.net/tech/detail-158639.html

Default ([Vue2]babel, eslint) 默认配置 提供 babel 和 eslint 支持
Default ([Vue3]babel, eslint) 默认配置 提供 babel 和 eslint 支持
Manually select features 自己手动去选择需要的配置

cd rhtlxjr-new-vue
npm run serve
启动项目

启动成功，在浏览器输入地址看效果

看到这个页面说明用新版的cli.4初始化项目成功

项目的目录结构：没有build、config、static文件夹了，只有src和public文件夹，index.html在public文件夹里面了

二、开始项目搬迁啦

肯定不是在原项目上改，用新的cli初始一个新的项目，然后一点一点搬过来，这里就用上面初始化的项目。

1. 搬迁src

src搬迁比较简单，直接把原项目的src复制过来即可。然后会发现启动项目报错，没关系，因为还没搬package中的依赖呢

2. 搬迁index.html文件

index.html搬迁也比较简单，原来的index.html文件在项目根目录上，现在在public文件夹下，直接复制过来替换即可。注意文件中引入的静态资源文件的路径。

3. 搬迁package.json中的依赖

将原项目中package.json的dependencies所有插件复制到新项目的dependencie中，新项目中默认的保留。vue版本用2.5.16，先卸载：cnpm uninstall --save vue，安装cnpm install --save vue@2.5.16 因为我这里用2.6.14的后面使用UE百度编辑器会报错: Cannot read properties offsetWidth。然后cnpm install一下，再npm run serve

这个报错是因为vue2.6.14降到2.5.16版本，vue-template-compiler插件也要降版本，指定版本安装：cnpm install --save vue-template-compiler@2.5.16
再重新启动就不报这个错了。

报错，是因为有些文件没找到，找到对应文件处理一下，后面两行是因为组件引入路径名称大小写不对应，这里main.js中引入的css报错先注释后面解决，先把项目跑起来

安装babel-polyfill 和sass-loader
cnpm install --save babel-polyfill@6.26.0
cnpm install --save sass-loader@10.1.1
npm run serve启动，启动成功了

在浏览器打开页面空白，控制台报错因为src下的config.js引用了之前config配置文件的变量的地方，先注释，再启动

因为之前项目用了jquey,这里安装jquery插件，cnpm install --save jquery,使用配置jquery，在根目录新建vue.config.js文件，这个文件自定义配置，相当于以前的build,config下的配置都在这个文件中配置

代码如下：

const webpack = require('webpack')
chainWebpack: config => {
      config.plugin('provide').use(webpack.ProvidePlugin, [{
          $: 'jquery',
          jquery: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
      }]),
    },

启动，终于不报错了，能打开页面了，虽然没有样式，还没搬资源文件呢，接下来就是搬资源文件了。

4. 搬迁static下的静态资源文件

由于新的cli没有static文件夹，用public来存放静态资源，所以把static下的所有文件复制到public下。要注意之前引入的路径，"static/images/"改成“images/”,先这样改，刷新页面有图片了。index.html文件中引入的静态资源路径也要改。

回到main.js引入css文件，之前会报错，在vue.config.js配置public

代码如下：

function resolve(dir){
    return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
// 配置别名
config.resolve.alias
.set('@',resolve('./src'))
.set('public',resolve('./public'))

本地启动，终于能正常显示了
然后npm run build打包，又不行了。

刚刚在main.js中引入的css本地启动没问题，但打包找不到静态资源文件css，为了方便不去配置先把css搬到src下的assets里，然后在main.js中引入。可打包通过，本地启动也没问题。



可看到路由已经拆分了，生成多个js，760个组件，打包只花了一分钟。提高打包速度的效果已经实现了。接下来配置开发测试环境，连接后端接口

5. 配置本地、测试、生产环境打包

在项目根目录下新建.env.development 、.env.production、.env.test三个文件，分别对应本地、生产、测试。因为测试和生产打包是一样的，连接的接口地址不一样，所以用VUE_APP_CURRENTMODE这个变量来区分。测试环境通过变量outputDir设置打包出的文件夹叫test,对应的vue.config.js配置也要改

.env.development

// development 开发环境
NODE_ENV='development'
// 下面为接口地址
VUE_APP_BASE_URL='本地环境连接接口地址'

.env.production

// production 生产环境
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'production'
// 下方链接为生产环境接口地址
VUE_APP_BASE_URL='生产环境接口地址'

.env.test

// test 测试环境
NODE_ENV = 'production'
VUE_APP_CURRENTMODE = 'test'
// 下方链接为测试环境接口地址
VUE_APP_BASE_URL = "测试环境接口地址"
outputDir = test

在vue.config.js中设置对应环境打包目录，build打包生产环境生成dist文件夹，test打包测试环境生成test文件夹。

然后修改package.json的打包命令，新增test打包命令，习惯本地启动用npm run dev,把“serve”改成“dev”。
修改前：

修改后：

配置api接口baseUrl，我这在src下面的config.js中判断根据当前环境设置不同的baseUrl。

代码如下：

let href = location.href;//截取URL地址区分是否带项目路径
let cutTag ='/#';

export function setBaseUrl() {
    let apiUrl = '';
    if (process.env.NODE_ENV == 'development') {
        let localHref = href.substring(0, href.indexOf(cutTag));
        apiUrl = process.env.VUE_APP_BASE_URL == '' ? localHref : process.env.VUE_APP_BASE_URL;//判断是否分离部署

    }else if(process.env.VUE_APP_CURRENTMODE == 'test'){
        let localHref = href.substring(0, href.indexOf(cutTag));
        apiUrl = process.env.VUE_APP_BASE_URL == '' ? localHref : process.env.VUE_APP_BASE_URL;//判断是否分离部署

    }else if(process.env.VUE_APP_CURRENTMODE == 'production'){
        let localHref = href.substring(0, href.indexOf(cutTag));
        apiUrl = process.env.VUE_APP_BASE_URL == '' ? localHref : process.env.VUE_APP_BASE_URL;//判断是否分离部署

    }
    console.log("process.env.NODE_ENV:",process.env.NODE_ENV);
    console.log("VUE_APP_CURRENTMODE:",process.env.VUE_APP_CURRENTMODE);
    console.log("apiUrl:",apiUrl);
    return apiUrl;
}

在axios统一配置的地方引入config.js，设置baseURL。

启动本地: npm run dev
打包生产: npm run build (生成dist文件夹)
打包测试: npm run test (生成test文件夹)
启动本地效果：验证码刷出来了，说明已经成功连接到后端接口了

打包生产和测试大概一分钟左右，生成文件如下

总结

经过一番折腾终于成功把项目升级了，从打包半个小时到一分钟。后续进行vue.config.js的配置优化。这个搬迁的过程需要一点一点搬，中间可能会遇见各种各样的问题，需要耐心一个一个解决。