vue老项目升级vue-cli新版模板总结

由 漆黑菌 于 2021年03月25日 发布

总体思路

先用新版vue-cli创建一个空白模板,然后把原有的源代码部分迁移过去。把eslint关掉,先一点点改webpack相关报错信息,改好了再加回来,改eslint的报错信息。推荐把eslint的自动化lint单独写一个commit方便code review。只靠前端想很好的迁移也不太现实,最好找个测试也有空的时候,让测试同学一起发现各种问题。

遇到的坑总结

环境变量名称修改

新版cli对环境变量前缀有要求,见vue-cli官方文档

只有 NODE_ENV,BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。 这一步基本手动全局替换即可

修改main函数入口

旧版大概长这样

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
});

新版大概这样,对着修改即可

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

迁移原有webpack配置

新版vue-cli隐藏了很多旧版的webpack配置,有直接配置的,比如devServer反代设置就迁过去,没直接提供的参考官方文档用chainwebpack改配置。babel,postcss之类的配置文件就直接丢到了用新cli的配置基本够用,有啥自定义的去新位置迁移就好。

迁移静态资源文件

根据文档,新增了public文件夹用来存放不需要处理的静态文件,原项目只需要把favicon和index.html模板迁过来就好。

迁移npm中的依赖

先一股脑复制过去,因为当时的node版本和之前创建项目时已经差的比较多了。很多版本需要手动升级,还有可能会出问题。思路是先升级最新版本,挂了就先回滚到小版本中比较新的,升级的同时找到依赖相关的页面,自己注意功能有没有什么明显问题。大概跑起来以后,去依赖库的文档站看看,基本上写的好的都有迁移指南,再大升级。

构建产物配置回滚

这个一般其实不需要,但是当时项目的转发规则做了些限制,导致新版cli build出的静态资源部分无法访问,所以要返祖一波。

  //修改产物文件夹
  assetsDir:'static', 

  // 去掉构建产物中的hash信息,其实这算劣化并不推荐这样做
  config.module
  .rule('images')
  .use('url-loader')
  .loader('url-loader')
  .tap((options) => {
    let name = options.fallback.options.name;
    name = name.replace('[name].[hash:8].[ext]', '[name].[ext]');
    options.fallback.options.name = name;
    options.limit = 1;
    return options;
  })
  .end();