详解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 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
js微信分享接口调用详解
Jul 23 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
JavaScript如何判断对象有某属性
Jul 03 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(三)
2012/03/22 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
php常用的工具开发整理
2019/09/26 PHP
css图片自适应大小
2007/11/28 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
2018/12/05 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python中with语句结合上下文管理器操作详解
2019/12/19 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Python用SSH连接到网络设备
2021/02/18 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
2014年会演讲稿范文
2014/01/06 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL