详解vue-cli@2.x项目迁移日志


Posted in Javascript onJune 06, 2019

vue-cli@2.x项目迁移日志

虽然 vue-cli@3 早就已经巨普及了,新项目应该已经很少有人还有使用 vue-cli@2.x 。 但是对于一些稍微早些时候的 vue 项目,如果当时没有做一些优化、配置,随着 webpack vue 等包的升级,有一些配置已经不一样了,并且关于 vue-cli@2.x 项目的文档、博客也越来越少,如果遇到问题也许也会有麻烦,因此就想着把当前的 vue-cli@2.x 项目原地升级配置。

项目结构

vue-cli@2.x 项目结构,其中红色圈出的部分是 2.x 版本才有的。

详解vue-cli@2.x项目迁移日志

vue-cli@3.x 目录结构, 箭头指出的两个文件的作用几乎完全替代上面的 build , config 文件夹中的文件,以及根目录下的 postcss 和 babel 配置文件的作用。

详解vue-cli@2.x项目迁移日志

迁移配置

新建 babel.config.js 文件, 内容是

module.exports = {
 presets: [
  '@vue/app'
 ]
}

新建 vue.config.js 文件,内容是:

const isProduct = process.env.NODE_ENV === 'production';

module.exports = {
 publicPath: isProduct ? 'xxx' : ''
};

需要注意的是,在 vue-cli@2.x 中我们设置的 assetsPublicPath 属性,在 vue-cli@3 中已经更名为 publicPath, 这个属性可以简单理解为打包出来的 js css img 文件在被 index.html 文件引入的时候添加的前缀。

直接将 static 文件夹更名为 public ,并且将根目录中的 index.html 文件也拖进 public文件夹中。这里需要注意的是,原来我们放在 static 中的静态资源,在代码中引用的时候,路径可能会写为 /static/img/xxx.jpg, 移动到 public 文件夹中之后,需要删除 static 前缀,直接引用 /img/xxx.jpg 即可。

直接将 static 文件夹中的资源全都拖进,新建 public 文件夹

接下来改动比较多的就是 package.json中的依赖包了

// 修改执行脚本
"start": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
// 需要手动更新一下 vue 和 vue-template-compiler 的版本,如果版本没有对象 npm start 就不成功,但是也不是严格的版本号一致,具体没研究过对应关系,直接从 vue-cli@3 初始化项目中抄版本号即可
 "dependencies": {
 ...
  "vue": "^2.6.10",
  "vue-router": "^2.3.1",
  "vuex": "^2.3.1"
 },
 // 这里的 7 个依赖都必须有,并且因为 webpack 功能被内置到 @vue/cli-service 中去了,所以原来 devDependencies 中根打包相关的依赖包都可以删除了。
 "devDependencies": {
  "@vue/cli-plugin-babel": "^3.7.0",
  "@vue/cli-plugin-eslint": "^3.7.0",
  "@vue/cli-service": "^3.7.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "vue-template-compiler": "^2.5.21",
  ...
 }

详解vue-cli@2.x项目迁移日志

删除原来的依赖,重新安装新的依赖

rm -rf node_modules && cnpm i

重新执行试试 npm start

此时很可能会遇到一个问题:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

是因为 vue 当前被编译的版本不对,造成这个影响主要是因为 webpack 的配置被修改引起的。 随便依照能找到很多解决办法,但是最好的办法是按照 vue-cli@3

// 将 main.js 中 new Vue 的参数修改一下形式

// vue-cli@2.x
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

// 修改为 vue-cli@3 中默认的形式
new Vue({
 router,
 render: h => h(App),
}).$mount('#app')

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
javascript 得到变量类型的函数
May 19 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
php与js的区别是什么
Aug 05 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
详解新手使用vue-router传参时注意事项
Jun 06 #Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 #Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 #Javascript
webpack4之如何编写loader的方法步骤
Jun 06 #Javascript
vue 插件的方法代码详解
Jun 06 #Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
node.js的http.createServer过程深入解析
Jun 06 #Javascript
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php中session与cookie的比较
2015/01/27 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
物业经理自我鉴定
2014/03/03 职场文书
社区服务活动总结
2014/05/07 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
超级礼物观后感
2015/06/15 职场文书
关于MySQL中explain工具的使用
2023/05/08 MySQL