详解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 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
详解新手使用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实现从上传文件创建缩略图的方法
2015/04/02 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
Python中的多重装饰器
2015/04/11 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现带参数与不带参数的多重继承示例
2018/01/30 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
软件工程师岗位职责
2013/11/16 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
实习协议书范本
2014/04/22 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
七个非常实用的Python工具包总结
2021/06/15 Python